VueX 스토어 필드의 값을 사용하여 컴포넌트를 초기화하려면 어떻게 해야 합니까?

VueX 스토어 필드의 값을 사용하여 컴포넌트를 초기화하려면 어떻게 해야 합니까?

A를 Vue 앱에 연결했습니다.

폼에서 필드의 값을 어떻게 처리해야 합니까?

폼이 초기화할 때 스토어의 값을 사용해야 하지만, 그 후 불변 상태의 값을 업데이트하려고 하면 안 됩니다.

사용하기 전에v-model좀 헷갈리네요.

저도 그런 걸 해봤어요.

    computed: mapState(["profile"])
    data() {
      return {
        firstname: '',
      };
    },
    created() {
      this.firstname = this.profile.firstname;
    }

하지만 컴포넌트를 다시 열 때마다 스토어에서 값이 업데이트되지 않습니다.

This solution 스토어를 현재 편집 중인 값이 아닌 서버의 값으로 업데이트하고 싶기 때문입니다.

처음에는 상태 값이 비어 있으므로 이를 확인하고 해당 값을 기반으로 데이터 개체 속성을 업데이트하십시오.

computed: mapState(["profile"]),
watch:{
   profile(val) {
       this.firstname = val.firstname;
   }
  },
   mounted() {
       this.firstname = this.profile.firstname;
   },

저는 이렇게 했습니다.

• 컴포넌트 마운트에서 필드 값을 컴포넌트 상태로 설정했습니다.
• 그런 다음 v-model을 상태에 연결하고 제출 시 스토어를 업데이트하는 작업을 사용합니다.

<template>
    <div id="login" class="cModal">
        <div>
            <header>
                <h2>Edit Profile</h2>
            </header>
            <div>
                <form @submit="edit()">
                    <div class="input-group">
                        <label for="firstname">Firstname</label>
                        <input id="firstname" type="text" v-model="firstname"/>
                    </div>
                    <div class="input-group">
                        <button>Edit profile</button>
                    </div>
                </form>
            </div>
            <footer class="cf">
                <a href="#" class="btn" @click="closeModal">Fermer [x]</a>
            </footer>
        </div>
    </div>
</template>

<script>
  import { mapState } from 'vuex';
  export default {
    computed: mapState(["profile"]),
    data() {
      return {
        firstname: '',
      };
    },
    created() {
      this.firstname = this.profile.firstname;
    },
    methods: {
      edit() {
        this.$emit("handleProfileUpdate", {firstname: this.firstname});
      },
      closeModal() {
        this.$emit("close");
      },
    }
  };
</script>

언급URL : https://stackoverflow.com/questions/57378565/how-to-init-a-component-with-the-value-of-a-vuex-store-field