使用 Vuex，为啥 mapGetters 不接受与 mapState 相同的语法？

Posted 2023-02-23

【中文标题】使用 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'
])

似乎有效。

【参考方案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 - 并简单地导入它。