javascript - 本地组件数据在不应该更改 Vuex 状态时更改

Question

我有一个名为 EditUser.vue 的组件它使用 vue 路由器链接到路由器系统，这是该组件的路由定义

{
 path: "/users/:id/edit",
 name: "Edit User",
 props: true,
 component: () => import(/* webpackChunkName "edit-user" */ "@/views/EditUser.vue"),
 beforeEnter: (to, from, next) => {
   if (!store.getters.isLogged) next("/");
   else next();
 }
},

使用 props enable 非常简单，因为它需要获取用户 ID。

组件本身就是这个

<template>
<main class="h-creen p-3">

      <Input
        type="text"
        name="name"
        label="name"
        v-model="user.name"
        required
      />
</main>
</template>

<script>
import { mapState } from "vuex";
import Input from "@/components/Input.vue";

export default {
  name: "EditUserView",

  props: {
    id: {
      required: true,
      type: String,
    }
  },

  components: {
   Input,
  },

  data: () => ({
    user: {},
   }),

  async beforeMount() {
    // TODO move into router file
    if (this.users.length <= 0) {
      this.$router.push("/users");
    }

    this.user = this.users.find(user => user.id == this.id);
  },

  computed: mapState(["users"])
  };
</script>

我省略了无用的部分，这段代码无论如何都会复制问题。 <Input>只是标签的包装器和带有一些样式的输入，没有什么神奇的。

问题是，如果我在输入中输入一些内容，我希望 this.users被修改了，它发生了，但它不应该修改 Vuex 状态内的相同记录，但这种情况发生了，我不明白为什么。换句话说，如果我使用输入编辑名称，此修改会在状态上传播，从而在其他 View 中呈现，但它不应该因为它是本地数据。

我在这里想念什么？

Answer 1

这导致分配对现有对象的引用:

this.user = this.users.find(user => user.id == this.id);

当 user.name属性更改为 v-model双向绑定(bind)，相应的嵌套对象在 users中修改.

数据应该被浅拷贝到本地(根据情况可能需要深拷贝):

this.user = {...this.users.find(user => user.id == this.id)};

然后 this.user应复制回 this.users需要的时候。

或者组件不应该有自己的 user ，它可以包含单独的字段:

  <Input
    type="text"
    name="name"
    label="name"
    v-model="name"
    required
  />

name等可以复制回 this.users需要的时候。