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

【问题标题】：Access vue vuex namespaced getter from template从模板访问 vue vuex 命名空间的 getter
【发布时间】：2017-12-21 06:20:41
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

阅读 this 关于 getters 的文档页面。它解释了一切。
感谢@ironcladgeek 提供文档链接。我已经通读了文档。解决此问题的一种方法是通过执行以下操作在 ...mapGetters 中分配一个键： ` ...mapGetters({fooBarGetter: 'fooModule/barGetter'}) ` 然后我可以使用 {{forBarGetter 从模板访问值}} 但我想知道是否可以在模板中使用 getter 而无需分配另一个键
我已将问题编辑得更具体。希望有帮助

标签： vue.js vuejs2 vuex

【解决方案1】：

实际上它是在 '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>

【讨论】：

【解决方案2】：

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

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

这将使值在模板中以this.barGetter 或barGetter 的形式提供。请注意，拥有多个 mapGetters 语句是完全可以接受的。

Vuex Getters documentation

Vuex Binding helpers with namespace

【讨论】：

这对我不起作用...此答案中链接的文档也未链接到命名空间的 Getter。据我所见，两者之间存在细微差别。
@WindUpLordVexxos 命名空间吸气剂应该同样工作。助手将在命名空间之间正确添加“/”。更多信息可以在这里找到：vuex.vuejs.org/guide/…

【解决方案3】：

对于想要在不将命名空间指定为第一个参数的情况下实现此目的的任何人，也可以将object/map 传递给 getter 已经命名空间名称的 mapGetters。

...mapGetters({
    'activeItems': ACTIVE_ITEMS_GETTER_WITH_NAMESPACE
})

当您的常量具有命名空间名称的突变、getter 和操作时，这非常有用。在我们的例子中，我们有很多模块，有时查找我们的 getter、mutation 或 action 所在的模块非常耗时。这就是我们为常量添加命名空间的原因。

【讨论】：

这对我来说从来没有用过，所以在这种情况下ACTIVE_ITEMS_GETTER_WITH_NAMESPACE应该是fooModule/barGetter吗？