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

Question

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

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？

Answer 1

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

在你的store/getters.js

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

Answer 2

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

getter 作为 第二个参数传递给其他 getter:

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

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

Answer 3

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

这个有效：

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

这没用

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

Answer 4

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

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

Answer 5

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

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

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

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

How do I call a getter from another getter in Vuex?

vuejs2

vuex