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

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

    import { LocalStorage } from 'quasar';
    import {
    } 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: {
          '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 */
        } 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!

  • @Samulwong ...mapMutation('shopping', ['INIT_BUY_CART']) is one way to do it, please refer to official vuex docs

  • @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.

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

  • 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.

Log in to reply