Question

我在我的where instruct.InstructorInstrNo == if(royalHIstory.RoyalIns.ToString().Length == 3) "0" + royalHIstory.RoyalIns.ToString() else royalHIstory.RoyalIns.ToString()组件中制作了vuex名称空间的getter映射，如下所示：

.vue

现在如何在.vue组件模板中访问此getter 我尝试了...mapGetters([ 'fooModule/barGetter' ])，但似乎没有用，{{fooModule.barGetter}}显然是错误的。

我可以通过

在mapGetters中为getter指定另一个键

{{fooModule/barGetter}}

这允许我使用...mapGetters({ fooBarGetter: 'fooModule/barGetter' })

访问模板中的值

但是，我想知道是否有办法访问{{forBarGetter}}而没有为其分配另一个密钥。可能吗？如果是这样的话？

Answer 1

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

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

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

Vuex Getters documentation

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>

Answer 3

对于任何希望在不将名称空间指定为第一个参数的情况下实现此目标的人，也可以将object/map传递给具有已获取名称的名称的吸气剂的mapGetters。

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

当您的常量带有命名空间名称的突变，getter和action时，这非常有用。在我们的案例中，我们有很多模块，有时在内部获取，获取突变或操作的模块中查找该模块会很费时间。这就是为什么我们在常量中添加名称空间的原因。

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

3 个答案: