vue.js - vuex:为什么从命名空间模块内调用突变需要前缀？

Question

我有以下 vuex 配置

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

    },

列表模块代码如下所示

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

调用 this.commit('updateListingAllItems', response.data) 时，我收到 [vuex] 未知突变类型:updateListingAllItems。

vuex guide说

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

为什么我会收到错误消息？

Answer 1

在操作方法内 this 是存储。您的代码在商店实例上提交了无前缀的突变。

如果你改变

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

至

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

你会得到你所期望的。