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 {
      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!



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



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