Vuex createNamespacedHelpers 不起作用

Question

我正在构建一个包含多个模块的 Vuex 商店。 我想轻松定义和映射 getter 和操作的类型，以便我可以在路径中使用自动模块名称，而不是为所有方法调用 $store.getters["modulename/gettername"]。

我发现我可以使用 vuex 库中的 createNamespacedHelpers 帮助程序，但它不起作用或我的配置中缺少某些内容。

这是我的 namespace-helper.js 文件

import { createNamespacedHelpers } from 'vuex';
import { getters, actions } from './types';

const { mapGetters, mapActions } = createNamespacedHelpers('modulename');

export default {
  computed: mapGetters([
    getters.getMethod1,
    getters.getMethod2
  ]),
  methods: mapActions([
    actions.actionMethod1,
    actions.actionMethod2
  ])
}

在我的 vue.js 中有

import Vue from 'vue';
import Vuex from 'vuex';
import store from './store/index';
import someModuleNameSpaceHelper from './store/modules/someModule/namespace-helper';

Vue.use(Vuex);

window.vueRoot = new Vue({
  el: '#vue-root',
  store,
  someModuleNameSpaceHelper ,
  computed: {

  }
});

我认为此时我可以访问 vuex getter，例如：vueRoot.getMethod1

我错过了什么吗？

Answer 1

你使用的是object property value shorthand，所以你的代码是sn-p

window.vueRoot = new Vue({
  el: '#vue-root',
  store,
  someModuleNameSpaceHelper ,
  computed: {

  }
});

等价于

window.vueRoot = new Vue({
  el: '#vue-root',
  store,
  someModuleNameSpaceHelper: someModuleNameSpaceHelper,
  computed: {

  }
});

这就像在做

window.vueRoot = new Vue({
  el: '#vue-root',
  store,
  someModuleNameSpaceHelper: {
    computed: {...}, // vue won't see this
    methods: {...}   // vue won't see this
  } ,
  computed: {

  }
});

要不要改成

window.vueRoot = new Vue({
  el: '#vue-root',
  store,
  computed: someModuleNameSpaceHelper.computed,
  methods: someModuleNameSpaceHelper.methods
});