Question

我已经定义了一个带有（动作，状态，突变和吸气剂）的Vuex商店

当我在突变中向我的状态数组中添加一个新的待办事项时，我得到了以下错误：错误：[vuex]不要在变异处理程序之外改变vuex存储状态。

const state = {
  todos: []
}

export default {
  ADD_TODO (state, payload) {
    state.todos.push(payload.todo)
  }
}

是否无法使用具有状态的数组？

我也尝试使用todos状态的对象，它可以正常工作。

Answer 1

例如，如果您的待办事项变量来自数据部分，则可能是指针问题：

const _todo = Object.assign({}, todo)
ADD_TODO({todo : _todo}) // call store action

除了传递整个todos数组之外，你可以在添加到列表之前取消引用你的todo条目：

ID A     B      A      D
1  fill  NA     NA    Market
2  NA    Ball   fill  NA
3  NA    NA     NA    Market
4  fill  Ball   NA    NA

Answer 2

你不能改变状态本身，你必须为状态分配一个新的值来改变它，所以你可以这样做：

组件中的

将商店中的待办事项分配给

之类的变量

//COMPONENT
let todos = [...this.$store.todos] //or assign from a getter if you have one;
todos.push(newTodo);
addTodo(todos); //call mutation from component and pass your todos array as payload


//STORE
ADD_TODO (state, payload) {
  state.todos = payload;
}

.push结束于“不要改变vuex存储状态外的变异处理程序”

2 个答案: