Problem with mapMutation, error with "It's not a function"

[Samulwong]

Hello guys,
I generated a store with Cli named “shopping”, added state and mutation (with mutation-type)

import { LocalStorage } from 'quasar';
import {
  INIT_BUYCART,
  ADD_CART,
  GET_USERINFO,
  RECORD_USERINFO,
  SHOW_CART,
  REDUCE_CART,
  EDIT_CART,
} from './mutation-types';

export default {
  [INIT_BUYCART](state) {
    const initCart = LocalStorage.getItem('buyCart');
    if (initCart) {
      state.cartList = JSON.parse(initCart);
    }
  },

So when I use them in Vue file with mapState and mapMutation, should I do it as follow?

  compouted: {
    ...mapState([
      'shopping/cartList', 'shopping/login', 'shopping/receiveInCart', 'shopping/userInfo',
    ]),

  methods: {
    ...mapMutations(['shopping/ADD_CART', 'shopping/INIT_BUYCART', 'shopping/SHOW_CART', 'shopping/REDUCE_CART', 'shopping/RECORD_USERINFO', 'EDIT_CART']),
}

But when I call it in mounted, it show error “TypeError: this.INIT_BUYCART is not a function”

  mounted() {
    if (this.login) {
      /* eslint no-underscore-dangle: 0 */
      this._getCartList();
    } else {
      // this.$store.commit('shopping/INIT_BUYCART'); this work. 
      this.INIT_BUYCART(); //Report TypeError: this.INIT_BUYCART is not a function in console.
    }
  },

Can anyone help? Great thanks!

[metalsadman]

@Samulwong ...mapMutation('shopping', ['INIT_BUY_CART']) is one way to do it, please refer to official vuex docs https://vuex.vuejs.org/.

[Samulwong]

@metalsadman Thank you so much. I will try and read the docs more carefully. I didn’t understand the docs since it’s a little bit too simple (not mention about stores in sub-folder) and the vuex structure in quasar is a little bit different from plain vue.

[metalsadman]

@Samulwong indeed, quasar cli quasar new store <store_name> just neatly separate states, getters, mutations, actions and config in their own separate js files.

[srinivasgangji]

I am also running in to same issue. Looks like the mapped Vuex properties ( in this case mutation) is not available in Vue lifecycle methods.