javascript - 使用命名空间模块中的 mapState 和 mapMutations

Question

在将我的 vuex 存储分成三个模块后，我不知道如何访问突变和状态。我尝试了不同的语法，但不确定要遵循什么。

map 状态: 这就是我设置 mapStates 的方式，vendor 和 root 是模块名称。

...mapState({
  vendor: state => state.vendor.vendor,
  language: state => state.root.language
})

并像这样使用它:

console.log(this.vendor);

map 突变: 我想我已经正确设置了mapMutations。

methods: {
  ...mapMutations('vendor', ['UPDATE_VENDOR', 'SET_VENDOR_APISTATE'])
}

并像这样访问它:

this.$store.commit('UPDATE_VENDOR', response.data);

或

this.UPDATE_VENDOR(response.data);

这些似乎都不适合我，我不知道我做错了什么。

我的商店看起来像这样:

import vendorModule from './vendor/vendorModule';

const store = new Vuex.Store({
  modules: {
    customer: customerModule,
    root: rootModule,
    vendor: vendorModule
  }
});

使用这样的模块:

const vendorModule = {
  namespaced: true,
  state: () => ({
    vendor: null,
    vendorApiState: ENUM.INIT
  }),
  mutations: {
    UPDATE_VENDOR(state, vendor) {
      state.vendor = vendor;
      state.vendorApiState = ENUM.LOADED;
    }
  }
};

export default {
  vendorModule
};

编辑 我意识到我的模块结构错误。正如 Kelvin Omereshone 所写，我在这里使用了错误的语法: this.$store.commit('vendor/UPDATE_VENDOR', response.data);。

工作模块结构为:

const state = () => ({
  vendor: null,
  vendorApiState: ENUM.INIT
});

const mutations = {
  UPDATE_VENDOR(state, vendor) {
    state.vendor = vendor;
    state.vendorApiState = ENUM.LOADED;
  }
};

export default {
  namespaced: true,
  state,
  mutations
};

Answer 1

如果您想使用this.$store.commit('UPDATE_VENDOR', response.data);。不需要mapMutations。就像这样使用它:

this.$store.commit('vendor/UPDATE_VENDOR', response.data);

注意:模块名称位于 Mutation 名称之前，以正斜杠分隔 /