vuex에서 데이터의 초기 값을 설정하는 방법

vuex에서 데이터의 초기 값을 설정하는 방법

내 목표는 사용자가 계정 데이터를 수정할 수 있도록 '계정 편집' 양식을 만드는 것이다.계정 데이터를 사용자 데이터(예: 사용자 이름, 이메일, 주소...)로 이미 채워진 형식으로 표시하려고 한다.

그런 다음 사용자는 양식의 데이터를 수정하고 사용자 정보를 업데이트하는 이 양식을 제출할 수 있다.

v-model을 사용하여 데이터에서 accountInfo라는 개체에 양식 입력을 바인딩하고 있으며, 다음과 같이 표시됨:

data() {
    return {
        accountInfo: {
                firstName: ''
        }
    }
}

내 템플릿에 입력된 폼의 예는 다음과 같다.

<input v-model.trim="accountInfo.firstName" type="text" class="form-control" id="first-name" />

개체의 키 값은 현재 비어 있는 문자열이지만 vuex의 상태 속성인 userProfile이라는 개체에서 가져온 값을 입력하십시오.

내 '계정 편집' 구성 요소에서 다음을 가져와 vuex 상태를 매핑하는 중:

import { mapState } from "vuex";

계산된 속성에서 다음 항목 사용

computed: {
    ...mapState(["userProfile"])
}

빈 문자열을 accountInfo 값으로 사용하는 대신 vuex에서 매핑된 userProfile 계산 속성에서 값을 할당하십시오.

data() {
        return {
            accountInfo: {
                    firstName: this.userProfile.fristName,
            }
        }
    }

이것은 내 양식에 대해 원하는 초기 데이터를 제공할 것이지만 불행히도 이것은 작동하지 않는다. 아마도 데이터는 계산된 속성보다 수명 주기 초기에 렌더링되기 때문이다.

전체 코드:

계정 편집부에를 하다

<template>
    <div class="container-fluid">
        <form id="sign_up_form" @submit.prevent>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <input v-model.trim="signupForm.firstName" type="text" class="form-control" id="first_name" />
                </div>
            </div>
        </form>
    </div>
</template>

<script>
import { mapState } from "vuex";
import SideBar from "../common/SideBar.vue";

export default {
  name: "EditAccount",
  computed: {
    ...mapState(["userProfile"])
  },
  data() {
    return {
      accountInfo: {
        firstName: this.userProfile.firstName
      }
    };
  }
};
</script>

store.js:

export const store = new Vuex.Store({
    state: {
        userProfile: {firstName: "Oamar", lastName: "Kanji"}
    }
});

네 말이 맞았어, 컴퓨터들은 초기 후에 평가되는 거야.data함수를 호출한다.

퀵 픽스

논평에서 @자콥 고는 다음과 같이 언급했다.

$store데이터 기능이 호출되기 전에 준비되어야 한다.그러므로firstName: this.$store.state.userProfile.firstName잘 될 거야

export default {
  name: 'EditAccount',
  data() {
    return {
      accountInfo: {
        firstName: this.$store.state.userProfile.firstName
      }
    }
  }
};

정말 컴퓨터가 필요해?

초기 값을 설정할 수 있는 @bottomsnap의 답변을 참조하십시오.mounted라이프사이클 훅

네 코드는 이렇게 생겼을 거야

import { mapState } from 'vuex';

export default {
  name: 'EditAccount',
  computed: {
    ...mapState(['userProfile'])
  },
  data() {
    return {
      accountInfo: {
        firstName: ''
      }
    }
  }
  mounted() {
    this.accountInfo.firstName = this.userProfile.firstName;
  }
};

값을 지정하지 않고 한 번 렌더링할 수 있지만 장착 후 렌더링할 수 있다.

컨테이너 대 프리젠테이션

나는 또 다른 대답으로 부에의 의사소통 채널을 설명하지만, 여기에 당신이 할 수 있는 간단한 예가 있다.

양식 구성 요소를 프리젠테이션 논리로 처리하여 저장소에 대해 알 필요가 없도록 하고, 대신 프로필 데이터를 소품으로 받으십시오.

export default {
    props: {
        profile: {
            type: Object,
        },
    },
    data() {
        return {
            accountInfo: {
                firstName: this.profile.firstName
            }
        };
    }
}

그런 다음, 상점에서 정보를 가져오는 것, 행동을 유발하는 것 등을 부모가 처리하도록 한다.

<template>
    <EditAccount :profile="userProfile" :submit="saveUserProfile"/>
</template>
<script>
import { mapState, mapActions } from "vuex";

export default {
    components: { EditAccount },
    computed: mapState(['userProfile']),
    methods: mapActions(['saveUserProfile'])
}
</script>

제이콥은 가게가 준비되었다고 말하는 것이 틀리지 않지만,this.$store.state.userProfile.firstName효과가 있을 것이다, 나는 이것이 위의 솔루션으로 쉽게 해결될 수 있는 디자인 문제에 대한 패치라고 생각한다.

기존과 같이 v-model로 입력 바인딩:

<div id="app">
    <input type="text" v-model="firstName">
</div>

마운트된 라이프사이클 후크를 사용하여 초기 값 설정:

import Vue from 'vue';
import { mapGetters } from 'vuex';

new Vue({
      el: "#app",
      data: {
        firstName: null
      },
      computed: {
        ...mapGetters(["getFirstName"])
      },
      mounted() {
        this.firstName = this.getFirstName
      }
    })

참조URL: https://stackoverflow.com/questions/51063583/how-to-set-initial-values-for-data-from-vuex