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);

你会得到你所期望的。

vuex：为什么从命名空间模块中调用突变需要前缀？

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

vue.js

vuex