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

Question

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

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

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

我可以通过

为mapGetters中的getter分配另一个键

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

这允许我使用 {{forBarGetter}}

访问模板中的值

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

Answer 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>

Answer 2

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

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

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

Vuex Getters documentation

Vuex Binding helpers with namespace

Answer 3

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

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

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

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

Access vue vuex namespaced getter from template

vue.js

vuejs2

vuex