从模板访问 vue vuex 命名空间的 getter

Question

我在我的 .vue 组件中制作了 vuex 命名空间的 getter 映射，如下所示：

 ...mapGetters([
  'fooModule/barGetter'
])

如何在 .vue 组件模板中访问此 getter？我试过了 {{fooModule.barGetter}} 但是好像不行， {{fooModule/barGetter}} 显然是错误的。

我可以在 mapGetters 中为 getter 分配另一个键

...mapGetters({
    fooBarGetter: 'fooModule/barGetter'
})

这允许我使用 {{forBarGetter}} 访问模板中的值

但是，我想知道是否有一种方法可以访问 'fooModule/barGetter' 而无需为其分配另一个密钥。可能吗？如果是这样怎么办？

原文由 Mohamed Hussain 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

mapGetters 的第一个参数可以是命名空间：

 computed: {
    ...mapGetters("fooModule", [
        "barGetter"
    ]),
    ...mapGetters("anotherModule", [
        "someGetter"
    ])
}

这将使该值在模板中作为 this.barGetter 或仅 barGetter 可用。请注意，有多个 mapGetters 语句是完全可以接受的。

Vuex Getters 文档

带命名空间的 Vuex 绑定助手

原文由 matpie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

实际上它是在密钥 'fooModule/barGetter' 下注册的，这不是 javascript 变量的有效名称。所以你应该以字符串的形式访问密钥，啊，所以，它不是那么优雅。但您仍然可以这样做，在模板中使用 {{ _self['fooModule/barGetter'] }} 访问它。

请参阅此工作示例：

 new Vue({
  el: '#app',
  store: new Vuex.Store({
    modules: {
      fooModule: {
        namespaced: true,
        state: {},
        getters: {
          barGetter() {
            return 'Hi :)';
          }
        }
      }
    }
  }),
  computed: Vuex.mapGetters([
    'fooModule/barGetter'
  ])
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script>
<script src="https://unpkg.com/vuex@2.3.1"></script>

<div id="app">
  {{ _self['fooModule/barGetter'] }}
</div>

原文由 FitzFish 发布，翻译遵循 CC BY-SA 3.0 许可协议