首页 文章

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

提问于
浏览 次
27

考虑一个简单的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

4 回答

  • 63

    安吉的答案很接近....

    在VueJS 2.0中，您将传递 state 和 getters . 所以这应该在 store/getters.js 中起作用：

    export default foo = (state, getters) => {
    return getters.yourGetter
}
    回复于
  • -2

    我测试时没有 state 并没有't work in vuejs 2.5.16. That'为什么 state 是必要的 .

    这工作：

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

    这没用

    export default foo = (getters) => {
    return getters.yourGetter
}
    回复于
  • 1

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

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

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

    In your store/getters.js

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

相关问题