使用 Vuex，为什么 mapGetters 不接受与 mapState 相同的语法？答案

【问题标题】：With Vuex, why isn't mapGetters accepting the same syntax as mapState?使用 Vuex，为什么 mapGetters 不接受与 mapState 相同的语法？
【发布时间】：2018-12-08 12:34:25
【问题描述】：

我有一个 Vue 组件，它映射来自 Vuex 商店的状态、突变、动作和 getter。

import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
export default {
  name: 'DefaultLayout',
  computed: {
    ...mapState({
      settings: (state) => state.settings,
      language: (state) => state.language
    }),
    ...mapState([
      'changeRouteTo'
    ]),
    ...mapGetters([
      'isLoggedIn'
    ])
  }
...

问题是，我无法让...mapGetters 使用显式语法，就像我在上面处理...mapState 的第一个实例时那样。

我试过了

...mapGetters({
  isLoggedIn: (state) => state.getters.isLoggedIn
})

和

...mapGetters({
  isLoggedIn: (state) => state.isLoggedIn
})

和

...mapGetters({
  isLoggedIn: (state) => this.$store.getters.isLoggedIn
})

但只有

...mapGetters([
  'isLoggedIn'
])

似乎有效。

【问题讨论】：

标签： vue.js vue-component vuex

【解决方案1】：

要使用...mapGetters 中的对象，语法如下：

...mapGetters({
  isLoggedIn: 'isLoggedIn'
})

其中键是您希望 getter 映射到的名称，值是作为字符串的 getter 名称

【讨论】：

【解决方案2】：

使用 mapGetters，您应该使用 getter 访问状态的某些部分，例如在您的商店中，您将拥有类似的东西

const state = {
  isLoggedIn:''
}

const getters = {
  isLoggedIn(state) {
    return state.isLoggedIn
   }
}
export default {
  state,
  getters
}

在您的组件中，您可以像这样访问 isloggedIn 属性

 computed: {
      ...mapGetters(['isLoggedIn'])
    },

现在您可以访问 isLoggedIn 属性因为 mapGetters 可以访问 gitters 的 get 函数，它返回存储的一部分，你不必重写 get 函数并将状态传递给它，你应该在 getter 中执行它的逻辑这就是目的

【讨论】：

【解决方案3】：

以上答案都是正确的，虽然他们没有回答“为什么”这个问题？所以文档也没有回答 - 很遗憾。让我告诉你我的看法：

VueX getter 应该已经可以做任何你需要的事情了。你看，VueX 是为大型应用程序设计的。因此，状态或从基本状态（getter）派生的状态很有可能会在多个地方使用。

Getter 已经可以访问 VueX 状态（因为它们是从状态派生的！），它们也已经可以访问其他 VueX getter！

我想说，如果您发现自己需要操作 getter，只需创建另一个执行此操作的 getter - 并简单地导入它。

【讨论】：