考虑一个简单的 Vue 博客：
我使用 Vuex 作为我的数据存储，我需要设置两个 getters：一个 getPost getter 用于按 ID 检索 post，以及一个 listFeaturedPosts返回每个特色帖子的前几个字符。特色帖子列表的数据存储架构通过其 ID 引用帖子。为了显示摘录，需要将这些 ID 解析为实际帖子。
商店/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',
]
}
商店/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);
}
存储/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？
在 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
传递 getters 作为第二个参数来访问本地和非命名空间的 getter。对于命名空间模块，您应该使用 rootGetters（作为 4th 参数，以便访问在另一个模块中定义的 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
我在没有 state 的情况下进行了测试，但没有工作。这就是为什么需要 state。
这有效：
export default foo = (state, getters) => {
return getters.yourGetter
}
这没有用
export default foo = (getters) => {
return getters.yourGetter
}
state 对象命名为 getters 并忽略第二个参数，该参数将是实际的 getters 对象。如果您在此示例中自省 getters，您会看到它实际上是您的状态对象。
而不是传递状态，而是传递 getter，然后调用你想要的任何其他 getter。希望能帮助到你。
在你的商店/getters.js
export default foo = (getters) => {
return getters.anyGetterYouWant
}
export default foo = ({ getters }) => { return getters.anyGetterYouWant }
