Vuex store - 将状态中的项目推送到状态数组导致数组中的前一个项目更改为当前状态项目

Posted 2023-02-22

【中文标题】Vuex store - 将状态中的项目推送到状态数组导致数组中的前一个项目更改为当前状态项目

【英文标题】：Vuex store - pushing item in state to a state array causes the previous item in the array to change to the current state item

【发布时间】：2021-02-02 17:30:49

【问题描述】：

我正在尝试使用 Vue 和 Vuex 制作待办事项列表。在我的状态下，我有一个 todo 和 todoList。更新状态中的待办事项工作正常。然后我尝试将 todo 推送到 todoList。这也很好。但是当我推送第二个 todo 时，第一个变为与第二个 todo 相同...

<input type='text' :value="title" @input="updateTitle" placeholder="Title" ref="title">
<div class='addIcon' v-html="plusSVG" @click="addTodo"></div>

computed: 
      ...mapState(
        title: state => state.todo.title
      )
,
methods: 
      updateTitle(e) 
      this.$store.commit('updateTitle', e.target.value);
      ,
      addTodo() 
          this.$store.commit('addTodo');      
      

store.js

state() 
    return
      todo: 
        title: '',
      ,

      todos: [
      ]
   ;\
,
mutations: 
    updateTitle(state, title) 
      state.todo.title = title;
    ,
    addTodo(state) 
      state.todos.push(state.todo);
    
  

我不确定为什么它会改变已经推送到数组的内容。

【参考方案1】：

这是由于 Vuex 的特性，您的状态对象中只有并且只有一个数据副本，因此将 state.todo 推送到数组会推送您在您的状态中拥有的唯一 todo 副本，所以当您再次更新它会更改数组内的引用，您需要将新元素推送到您的状态，您需要在“addTodo”方法中接收标题并创建并推送新对象：

addTodo(state, t) 
  state.todos.push(title: t);

【讨论】：

如果我要向 Todo 状态添加更多项目，有没有办法制作 state.todo 的深层副本并将其推送到 addTodo 数组中？

深拷贝是什么意思？你能举个例子吗？