로컬 구성 요소 데이터가 Vuex 상태를 변경하지 않아야 할 때 변경

로컬 구성 요소 데이터가 Vuex 상태를 변경하지 않아야 할 때 변경

내 컴포넌트는EditUser.vuevue 라우터를 사용하여 라우터 시스템에 링크되어 있습니다.이것은 이 컴포넌트의 루트의 정의입니다.

{
 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();
 }
},

사용자 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 상태 내에서 동일한 레코드를 수정해서는 안 됩니다만, 그 이유는 알 수 없습니다.즉, 입력을 사용하여 이름을 편집하면 이 수정 내용이 상태에 전파되어 다른 보기에 렌더링되지만 로컬 데이터이므로 편집해서는 안 됩니다.

내가 뭘 놓쳤지?

따라서 기존 개체에 대한 참조가 할당됩니다.

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

언제user.name에 의해 속성이 변경됩니다.v-model쌍방향 바인딩, 각각의 중첩된 객체가 변경됨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필요할 때.

언급URL : https://stackoverflow.com/questions/60705343/local-component-data-change-vuex-state-when-it-shouldnt