Question

我正在尝试使用Vue和Vuex制作待办事项清单。在我的状态下，我有一个待办事项和todoList。在状态下更新待办事项效果很好。然后，我尝试将待办事项推送到todoList。那也很好。但是，一旦我按下第二个待办事项，第一个便会更改为与第二个待办事项相同...

<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});
}

Vuex存储-将处于状态的项目推送到状态数组会导致数组中的上一个项目更改为当前状态项目

1 个答案: