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

考虑一个简单的 Vue 博客:
我正在使用 Vuex 作为我的数据存储，我需要设置两个 获得者: 一个 getPost getter 用于检索 post的 ID，以及一个 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 函数？

71786 次浏览
小开

不要传递 国家，而是传递 获得者，然后调用任何其他的 getter。希望它能有所帮助。

在你的店里/getters.js

export default foo = (getters) => {
return  getters.anyGetterYouWant
}
小开
最佳答案

在 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

小开

我测试没有 state和没有工作。这就是为什么 state是必要的。

这个方法可行:

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

这不管用

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

传递 getters作为访问本地和非名称空间 getter 的第二个参数。对于带名称空间的模块，应该使用 rootGetters(作为 四年级参数，以访问在另一个模块中定义的 getter) :

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

读取器以 第二个论点的形式接收其他读取器

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


提交答案