Question

为什么我会收到此错误：

错误[vuex]不要在突变处理程序之外改变vuex存储状态。

这是什么意思？

当我尝试输入编辑输入文件时会发生这种情况。

页/待办事项/ index.vue

export const state = () => ({
  list: []
})

export const mutations = {
  add (state, text) {
    state.list.push({
      text: text,
      done: false
    })
  },
  remove (state, todo) {
    state.list.splice(state.list.indexOf(todo), 1)
  },
  toggle (state, todo) {
    todo.done = !todo.done
  }
}

存储/ todos.js

我有什么想法可以解决这个问题吗？

Answer 1

在属于Vuex的状态上使用v-model可能有点棘手。

您已在v-model使用todo.text：

<input class="edit" type="text" v-model="todo.text" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)">

使用:value读取值，v-on:input或v-on:change执行在显式Vuex变异处理程序中执行变异的方法

此问题在此处理：https://vuex.vuejs.org/en/forms.html

Answer 2

您好，我遇到了同样的问题，并使用以下方法之一克隆我的对象来解决它：

{ ...obj} //spread syntax 
Object.assign({}, obj)
JSON.parse(JSON.stringify(obj))

对于您的代码，我认为您需要替换此部分

  computed: {
    todos () {
      // console.log(this)
      return this.$store.state.todos.list
    }
  }

有了这个

  computed: {
    todos () {
      // console.log(this)
      return {...this.$store.state.todos.list}
    }
  }

我不确定这是否是最好的方法，但希望这对遇到相同问题的其他人有所帮助。

Answer 3

能用lodash就不会头疼了

computed: {
...mapState({
      todo: (state) => _.cloneDeep(todo)
    })
}

Answer 4

export default new Vuex.Store({
    ...
    strict: true
})

尝试评论“严格”

Answer 5

以防万一有人还在为此烦恼，我通过复制/克隆商店状态来使我的代码正常工作。

在你的情况下，尝试这样的事情......

  computed: {
    todos () {
      return [ ...this.$store.state.todos.list ]
    }
  }

它基本上是一个扩展运算符，它导致创建 todos.list 数组的克隆。这样，您就不会直接更改状态的值，只是不要忘记提交，这样您的更改就会保存在商店中。

Vuex - 不要在突变处理程序之外改变vuex存储状态

5 个答案: