Vuex createNamespacedHelpers 不工作

Question

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

我发现我可以使用 vuex 库中的 createNamespacedHelpers 助手，但它不起作用或者我的配置中缺少某些东西。

这是我的命名空间-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，因此您的代码片段

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

Vuex createNamespacedHelpers 不工作

Vuex createNamespacedHelpers is not working

javascript

ecmascript-6

vue.js

vuex