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

Question

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

MapStates： 这就是我设置 mapStates 的方式，vendor 和 root 是模块名称。

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

并像这样使用它：

console.log(this.vendor);

MapMutations： 我想我已经正确设置了 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
};

标签： javascriptvue.jsvuexvuex-modules

Answer 1

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

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

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