奇怪的行为vuex变异

Question

查看/ 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对象的副本，这将解决此问题。