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

Question

我正在尝试使用 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);
    }
  }

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

Answer 1

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

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