奇怪的行为 vuex 突变

Question

Vue/vuex

你好，我有这样的状态：

 state: {
            tasks: [{
                title: 'Title task one',
                desc: 'Lorem ipsum dolor sit amet consectetur...',
                completed: false,
                id: 31232131312,
            },
            ...
        ],
        ...
        }

突变：

 addNewTask: (state, task) => state.tasks.push(task),

在组件中，我传递了这样一个对象

newTask: {
        title: "",
        desc: "",
        completed: false,
        id: Number
      }

下一个

store.commit("addNewTask", this.newTask);

一切正常，但是当我添加另一个任务时，两个任务看起来完全一样

例子：

{ title: 'task 1 ', desc: 'desc 1', completed: false, id: 11111}

下一个

{ title: 'task 2 ', desc: 'desc 2', completed: false, id: 22222}

这两个任务看起来像这样：

{ title: 'task 2 ', desc: 'desc 2', completed: false, id: 22222}

有人可以解释一下吗？

问候

编辑：

回购：

https://github.com/MateuszKawka/tasker

Answer 1

因此，直接在 Vuex 状态中改变项目通常是个坏主意。可以试试吗

addNewTask: (state, task) => state.tasks = state.tasks.concat([task])

这不会改变数组，而是改变它的值，所以 Vuex 可以监控它的变化。

编辑：

我想我找到了问题所在。问题是您每次创建新任务时都使用相同的 newTask 对象。

只需将命令更改为

store.commit("addNewTask", Object.assign({}, this.newTask));

这将创建一个 newTask 对象的副本，这将解决这个问题。