Javascript 本地组件数据不应更改Vuex状态'；T

我有一个名为

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>

从“vuex”导入{mapState}；
从“@/components/Input.vue”导入输入；
导出默认值{
名称：“EditUserView”，
道具：{
身份证：{
要求：正确，
类型：字符串，
}
},
组成部分：{
输入，
},
数据：（）=>({
用户：{}，
}),
异步beforeMount（）{
//TODO移入路由器文件
if（this.users.length user.id==this.id）；
},
计算：mapState（[“用户”]）
};

我省略了无用的部分，这段代码复制了这个问题<代码>只是一个标签的包装，一个带有一些样式的输入，没有什么神奇之处

问题是，如果我在输入中键入一些内容，我希望

this.users

会被修改，这是会发生的，但它不应该在Vuex状态中修改同一条记录，但这种情况发生了，我不知道为什么。换句话说，如果我使用输入编辑名称，则此修改会在状态上传播，从而在其他视图中呈现，但不应该，因为它是本地数据

---

我在这里缺少什么？

这会导致使用对现有对象的引用指定：

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

当使用

v-model

双向绑定更改

user.name

属性时，将在

users

中修改相应的嵌套对象

数据应浅拷贝到本地（根据具体情况，可能需要深拷贝）：

然后在需要时将

this.user

复制回

this.users

或者组件不应该有自己的

用户

，它可以包含单独的字段：

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

---

name

等可以在需要时复制回

this.users

。

不是100%确定，但您可以将用户映射到this.users。由于对象在javascript中是通过引用传递的，所以您的更改可能会传播回vuexit，因为它是本地数据，而不是本地数据，因为您使用的是全局状态。如前所述，用户对象是通过引用传递的。请解释一下该组件的工作原理。是否应该通过提交按钮或其他方式将更改提交回全局状态？@EstusFlask是的，我的意图很有趣。我发誓我在某处读到

find（）

是按值赋值的，但显然我错了。我将尝试此修复程序，然后返回这里接受此答案。没有内置函数深度复制对象，这是昂贵的，弊大于利，如果按值复制对象，您将不会高兴，因为这样每次它们都是不同的对象，

this.users.find（…）！==这个.users.find（…）

。在JS中，它是通过设计引用的-除非它是一个原始的。请原谅我的无知，我仍然是Javascript的新手，谢谢你的建议。今天我学到了一些有价值的东西

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