.push end´s in "Do not mutate vuex store state outside mutation handlers"

Question

我已经用（动作、状态、突变和吸气剂）定义了一个 Vuex 存储

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

const state = {
  todos: []
}

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

状态不能用数组吗？

我也尝试过使用一个对象来处理 todos 状态，效果很好。

Answer 1

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

在您的组件中，将您的待办事项从商店分配给一个变量，例如

//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;
}

Answer 2

这可能是指针问题，例如，如果您的 todo 变量来自数据部分：

/** Component **/
data () {
  todo : {
    // whatever
  }
},
methods: {
  addTodo () {

    // Will add same todo reference to state list
    // which can cause “Do not mutate vuex store state outside mutation 
    // handlers” exception

   ADD_TODO({todo : this.$data.todo}) 

  }
},

无需传递整个待办事项数组，您可以在添加到列表之前像这样取消引用您的待办事项条目：

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

.push end´s in "Do not mutate vuex store state outside mutation handlers"

.push end´s in "Do not mutate vuex store state outside mutation handlers"

javascript

vuejs2

store

vuex