Javascript .推端´；s在“中”；不要在变异处理程序之外变异vuex存储状态”；

我定义了一个Vuex存储区，其中包含（操作、状态、突变和getter）

当我将新的todo添加到我的状态数组中时，出现以下错误： 错误：[vuex]不要在变异处理程序之外变异vuex存储状态

const state = {
  todos: []
}

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

无法使用状态为的数组吗

---

我还尝试使用一个适用于todos状态的对象，该对象工作正常。

您不能改变状态本身，必须为状态指定一个新值以改变状态，因此在您的情况下，您可以执行以下操作：

在组件中，将TODO从存储分配给变量，如

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

---

例如，如果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}) 

  }
},

在添加到列表之前，您可以像这样取消引用todo条目，而不是传递整个todo数组：

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

---

好的…赋值但是：state.todos=[…state.todos，payload.todo]；不幸的是，抛出了相同的错误。