提交后，变量仍然是反应性的

Question

我正在尝试提交新任务。

预期结果应为 'created task with title'，但标题为空，因为 'formData' 仍处于反应状态。

这是代码示例：

// index.vue
<form class="form" @submit.prevent="createTask()">
  <label class="form__label">
    Title:
    <input
      type="text"
      class="form__input" 
      v-model="formData.title"
      placeholder="Title"
      required
    />
    </label>
  <button type="submit" class="form__button">Create</button>
</form>

...

export default class App extends Vue {
  formData = {
    title: "",
    completed: false,
  };


  createTask(): void {
    store.commit("task/SET_TASK", this.formData);
    this.formData.title = "";
  }
}

// Task.ts (vuex)
export default class Task extends VuexModule {
  tasks = [
    {
      title: "Example task",
      completed: false,
    },
  ];

  @Mutation
  SET_TASK(payload: TaskInterface) {
    this.tasks.push(payload);
  }
}

我做错了什么？

Answer 1

您可以通过使用扩展语法创建一个新对象来避免这种情况。

createTask(): void {
    store.commit("task/SET_TASK", { ...this.formData });
    this.formData.title = "";
  }

提交后，变量仍然是反应性的

After commit, variable is still reactive

typescript

vue.js

vuex

vuex4