vuex: why calling mutation from within a namespaced module requires a prefix?

Question

I have the following vuex config

import listing from '@/store/modules/listing'
var store = new Vuex.Store({
    modules:
    {
        listing: listing,

    },

and the listing module code looks like

import Vue from 'vue'
const listing = {
    namespaced: true,
    state: {
        listingAllItems: [],
        listingSelectedItems: [],       
    },
    mutations: {
        updateListingAllItems(state, param) {
        },
    },
    actions: {
        getListingItems(context, param) {
            var tempThis = this;
            return new Promise((resolve, reject) => {
                var url = 'http://WS/';
                Vue.http.get(url).then(response => {
                    tempThis.commit('updateListingAllItems', response.data);
                }).catch(error => reject(error));
            })
        },
    },
    getters: {}
}

export default listing

when calling this.commit('updateListingAllItems', response.data) I'm getting [vuex] unknown mutation type: updateListingAllItems.

the vuex guide says

Namespaced getters and actions will receive localized getters, dispatch and commit. In other words, you can use the module assets without writing prefix in the same module

Why am I getting the error message then ?

psalaets psalaets · Accepted Answer · 2017-10-17T00:08:32

Inside an action method this is the store. Your code commits an non-prefixed mutation on the store instance.

If you change

tempThis.commit('updateListingAllItems', response.data);

to

context.commit('updateListingAllItems', response.data);

you'll get what you expect.

vuex: why calling mutation from within a namespaced module requires a prefix?

1 Answers