本地組件數據不應該更改 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 狀態內的相同記錄，但發生了，我不明白為什么。 換句話說，如果我使用輸入編輯名稱，則此修改會在狀態上傳播，從而在其他視圖中呈現，但不應該，因為它是本地數據。

我在這里缺少什么？

Answer 1

這導致使用對現有對象的引用進行分配：

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

當使用v-model雙向綁定更改user.name屬性時，相應的嵌套對象會在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 。