时间戳

首页 > 解决方案 > Vuex：如何将getter的结果存储在状态中？

javascript - Vuex：如何将getter的结果存储在状态中？

问题描述

我的 Vuex.Store 出现问题：

我想使用两个状态条目作为带有 getter 的搜索条件（state.array 和 state.selected）来获取一个对象（getter.getRecipe）。然后我想将该结果存储在我的状态（state.recipe）中，以便能够在组件中更新它（即，根据客户端操作更改配方对象的一个​​键）。但是，我不知道如何在我的状态下存储 getter 的结果（“this.getters.getRecipe”不起作用......）。对提示很有帮助。非常感谢。

//store.js (vuex store)

export const store = new Vuex.Store({
state: {
   array: [recipe1, recipe2],
   selected: 0,
   recipe: this.getters.getRecipe()
 },
getters: {
   getRecipe: (state) => {
    return state.array[state.selected]
   }
 }
})

标签： javascriptvue.jsvuex

解决方案

相反，您应该使用带参数的 Method 风格的 getter：

您还可以通过返回函数将参数传递给 getter。当您要查询存储中的数组时，这特别有用：

一个基本的例子：

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

然后，使用示例：

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

或者，从组件内部：

this.$store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

通过这种方式，您可以确保您的状态仍然是一个纯数据结构，该结构遵循通量模式规定的单向数据流。

推荐阅读