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

奇怪的行为Vuex突变

1 个答案: