Uncaught TypeError: Cannot match against 'undefined' or 'null'.

Hi,

I try to create an API module which will be used by other modules in my store to ask for data then apply my business logic on top of it. Here is my api.js file:

import Vue from 'vue'
import { createStore, Resource } from 'vuex-rest-api'

const options = {
  axios: Vue.axios
}
const resource = new Resource(__API_ROOT__, options)

// Auth (User and Guest cases)
resource
  .addAction({
    action: "login",
    method: "post",
    property: "token",
    pathFn: () => '/auth/login'
  })
  .addAction({
    action: "getGuestHash",
    method: "get",
    property: "guest_hash",
    pathFn: () => '/auth/get_guest_hash'
  })
// Cart
  .addAction({
    action: "getCart",
    method: "get",
    property: "cart",
    pathFn: (id) => `/carts/${id}`
  })
  .addAction({
    action: "createCart",
    method: "post",
    property: "cart",
    pathFn: () => `/carts`
  })
  .addAction({
    action: "cleanCart",
    method: "put",
    property: "cart",
    pathFn: () => `/carts/clean`
  })
  .addAction({
    action: "getActiveCart",
    method: "get",
    property: "activeCart",
    pathFn: () => `/carts/active`
  })
  .addAction({
    action: "changeDomiciliationOffer",
    method: "put",
    property: "cart",
    pathFn: (id) => `/carts/${id}`
  })
  .addAction({
    action: "addOffer",
    property: "cart",

  })

export default createStore(resource)

my store/index.js file:

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import api from './modules/api'

Vue.use(Vuex)

const state = {
  count: 0
}

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules: {
    api
  }
})

export default store

Here is the error I get from the console:

[christianmalek]

@sotaan I just saw another error in your code snippet. You have to destructure the params in the path fn. False:

pathFn: (id) => `/carts/${id}` // false (id is the params object and not the id property

Correct:

pathFn: ({id}) => `/carts/${id}`

[sotaan]

I just found that I needed to call my actions that way: this.store.$dispatch('myaction', {}) to get it working. Calling that way: this.store.$dispatch('myaction') will trigger the error. I suggest that it must come from destructing assignment in your params in here: storeCreator.ts

try that: storeActions[dispatchString] = async ({ commit }, { params = {}, data = {} } = {}: ActionParamsBody) => { ...