我有一个名为 EditUser.vue
的组件使用 vue router 链接到路由器系统,这是该组件的路由定义
{
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 非常简单,因为它需要获取用户 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 中呈现,但不应该,因为它是本地数据。
我在这里缺少什么?
最佳答案
这会导致分配对现有对象的引用:
this.user = this.users.find(user => user.id == this.id);
当使用v-model
双向绑定(bind)更改user.name
属性时,users
中相应的嵌套对象将被修改。
数据应该浅复制到本地(根据情况可能需要深复制):
this.user = {...this.users.find(user => user.id == this.id)};
然后,在需要时,应将 this.user
复制回 this.users
。
或者组件不应该有自己的用户
,它可以包含单独的字段:
<Input
type="text"
name="name"
label="name"
v-model="name"
required
/>
name
等可以在需要时复制回this.users
。
关于javascript - 本地组件数据在不应该改变的时候改变了 Vuex 状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60705343/