Vuex 选择器，如 redux 重新选择答案

【问题标题】：Vuex selector like redux reselectVuex 选择器，如 redux 重新选择
【发布时间】：2019-11-14 15:45:26
【问题描述】：

在我的 nuxt 项目中，我有可以从其他商店属性推导出来的道具。

在 redux 中，我会在每次必要时使用 reselect 来计算那些，当商店发生变异时，而不一定是在每次渲染时？

如何使用 nuxt/vuex 实现相同的目标？

谢谢

【问题讨论】：

标签： redux vuex nuxt.js

【解决方案1】：

我想你要的是getters。

Vuex 允许我们在 store 中定义“getter”。您可以将它们视为商店的计算属性。与计算属性一样，getter 的结果基于其依赖项进行缓存，并且仅在其某些依赖项发生更改时才会重新评估。

// store/index.js

export const state = () => ({
  todos: [
    { id: 1, text: '...', done: true },
    { id: 2, text: '...', done: false }
  ]
})

export const getters =  {
  doneTodos: state => {
    return state.todos.filter(todo => todo.done)
  }
}

mounted() {
  // accessing in a component
  this.$store.getters.doneTodos
}

查看我链接的文档，其中有更多示例，包括如何使用基于方法的 getter，它不缓存结果。

如果您的 getter 是在模块中定义的，那么语法会有些不同。您需要做store.getters['module/doneTodos']，其中module 是您拥有的商店模块的名称。

【讨论】：

太棒了，这正是我想要的！