如何在 Vuex 中从另一个 getter 调用 getter？答案

【问题标题】：How do I call a getter from another getter in Vuex?如何在 Vuex 中从另一个 getter 调用 getter？
【发布时间】：2018-02-22 21:46:04
【问题描述】：

考虑一个简单的 Vue 博客：
我使用 Vuex 作为我的数据存储，我需要设置两个 getters：一个 getPost getter 用于按 ID 检索 post，以及一个 listFeaturedPosts 返回每个精选帖子的前几个字符.特色帖子列表的数据存储架构通过其 ID 引用帖子。为了显示摘录，需要将这些 ID 解析为实际帖子。

store/state.js

export const state = {
  featuredPosts: [2, 0],
  posts: [
    'Lorem et ipsum dolor sit amet',
    'Lorem et ipsum dolor sit amet',
    'Lorem et ipsum dolor sit amet',
    'Lorem et ipsum dolor sit amet',
    'Lorem et ipsum dolor sit amet',
  ]
}

store/getters.js

export default getPost = (state) => (postID) => {
  return state.posts[postID]
}

export default listFeaturedPosts = (state, getters) => () => {
  console.log(getters) // {}

  return state.featuredPosts.map(postID => getters.getPost(postID).substring(0, EXCERPT_LENGTH);
}

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  getters,
  mutations
})

根据文档，getters 参数可用于访问其他 getter。但是，当我尝试从listFeaturedPosts 内部访问getters 时，它是空的，并且由于getters.getPost 在该上下文中未定义，我在控制台中收到错误。

在上面的示例中，如何从 listFeaturedPosts 内部调用 getPost 作为 Vuex getter？

【问题讨论】：

标签： vuejs2 vuex

【解决方案1】：

我在没有 state 的情况下进行了测试，但没有工作。这就是为什么需要state。

这行得通：

export default foo = (state, getters) => {
    return getters.yourGetter
}

这没用

export default foo = (getters) => {
    return getters.yourGetter
}

【讨论】：

我想补充一点，它不适用于任何 Vue 版本。对象解构不应与命名参数混淆（请参阅原始建议中的答案以省略“状态”）。确实是（状态，吸气剂）
在第二个示例中，您将 state 对象命名为 getters 并忽略第二个参数，该参数将是实际的 getters 对象。如果你在这个例子中反省getters，你会发现它实际上是你的状态对象。

【解决方案2】：

在 VueJS 2.0 中，您必须同时传递 state 和 getters。

Getter 作为 2nd Argument 传递给其他 getter：

export default foo = (state, getters) => {
    return getters.yourGetter
}

官方文档：https://vuex.vuejs.org/guide/getters.html#property-style-access

【讨论】：

【解决方案3】：

Getter 接收其他 getter 作为第二个参数

getters: {
  doneTodos: state => {
    return state.todos.filter(todo => todo.done)
  },
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

这是官方文档的链接 - https://vuex.vuejs.org/guide/getters.html#property-style-access

【讨论】：

点赞：a) 清晰的代码示例 b) 链接到文档中的正确位置
这样写有区别吗？ getters: { doneTodos: state => { return state.todos.filter(todo => todo.done) }, doneTodosCount: (state, getters) => { return this.getters.doneTodos.length } }
@Rivo 据我所知你做不到。如果你尝试，你会得到这样的错误：[Vue warn]: Error in render: "TypeError: Cannot read property 'getters' of undefined"

【解决方案4】：

传递getters 作为第二个参数来访问本地和非命名空间的getter。对于命名空间模块，您应该使用 rootGetters（作为 4th 参数，以便访问在另一个模块中定义的 getter）：

export default foo = (state, getters, rootState, rootGetters) => {
    return getters.yourGetter === rootGetters['moduleName/getterName']
}

【讨论】：

这对于需要来自另一个 vuex 模块的 getter 的人很有用。我只是想强调一下，参数必须按照答案中显示的特定顺序，并且没有省略任何参数，以便它起作用。

【解决方案5】：

不是传递 state，而是传递 getters，然后调用您想要的任何其他 getter。希望能帮助到你。

在你的 store/getters.js 中

export default foo = (getters) => {
   return  getters.anyGetterYouWant
}

【讨论】：

我认为您将对象解构与参数混淆了。函数的第一个参数是状态，第二个是 getters 对象。您可以将第一个参数命名为“getters”，但它仍然是状态！您正在寻找：export default foo = (state, getters) => ...
或export default foo = ({ getters }) => { return getters.anyGetterYouWant }