vuejs2 - 在 Vuex 中如何从另一个 getter 调用一个 getter?

标签 vuejs2 vuex

考虑一个简单的 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 参数可用于访问其他 getters。但是,当我尝试从 listFeaturedPosts 内部访问 getters 时,它是空的,并且由于 getters.getPost 为空,我在控制台中收到错误在该上下文中未定义。

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

最佳答案

在 VueJS 2.0 中,您必须同时传递 stategetters

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

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

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

关于vuejs2 - 在 Vuex 中如何从另一个 getter 调用一个 getter?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46210109/

相关文章:

javascript - (Nuxt.js/Vue.js) 在 Vuex 商店中设置 axios 身份验证 token 在刷新后重置

vue.js - vue 重新加载子组件

forms - Vue form select 在选择相同元素时发出事件

vue.js - 单击 vue 组件中的保存按钮后如何关闭模式?

javascript - Vuex 状态变化传播

javascript - 在 Vue + Vuex + Phaser 响应式(Reactive)调用中丢失 'this' 范围

javascript - 将 vuex 状态的值指定为另一个参数的初始值

javascript - Flickity 通过 webpack 返回不同的结果

typescript - Vue 实例未获取 shims-vue.d.ts 文件

javascript - Vue.js - 不使用构建工具进行预编译