vue 및 vuex 상태를 초기화할 시기

vue 및 vuex 상태를 초기화할 시기

최근에 나는 사용자가 로그인할 "사용자"/"admin" 두 역할로 분리된 웹을 설계한다.
다른 역할은 같은 페이지에 로그인하지만 다른 버튼과 기능을 볼 수 있다.

MainPage.vue컨테이너라서 사용자 정보를 얻기 위해 ajax를 "/init"라고 부른 다음 Vuex 스토어에 커밋한다.
그러면Content.vue안에 있는 하위 페이지MainPage.vue그것은 다른 버튼들을 보여줄 것이다.$store.state.user메세지

하지만 나는 다른 api를 부르고 싶다.mounted안쪽에 무대 장치하다Content.vue사용자의 역할에 따라
그러나 이 단계에서 "/init"라고 불리는 아약스에 의해 채워지는 역할은 준비되지 않을 것이다.

전체적인 흐름은
// MainContent.부에를 하다

beforeCreate: async function () {
            await axios.post('/init').then(response => {
                if(response && response.data && response.data.data){
                    this.$store.commit("login", response.data.data)   
                }
            })
        }

// 내용.부에를 하다

mounted: async function() {
    try {
      console.log(this.$store, this.$store.state.user, this.$store.getters.isAdmin)
      // no value here 
}

Vue 구성 요소 수명 주기를 확인하고beforeCreate부모님의 이름을 부르기 전에mounted아동의
비동기식 기능이라도 라이프사이클 방법이 순서대로 호출될 것인가?
이 문제를 어떻게 해결해야 할까?

고마워요.

의 초기화를 지연시킬 수 있다.Content구성 요소:userVuex에서 상태를 사용할 수 있게 된 이유는v-if에게 지시하는Content구성 요소초기화만 하면 된다.user와 함께null브룩스 주(Vuex 주)

<!-- MainPage.vue -->
<template>
  <Content v-if="$store.state.user" />
</template>

지금this.$store.state.user그리고 그것에 의존하는 모든 것은 다음으로부터 이용 가능해야 한다.Content구성 요소의mounted라이프사이클 훅

비동기 호출을 사용하여 사용자 데이터를 가져오므로 구성 요소 수명 주기는 신뢰할 수 있는 방법이 아니다.로드 상태 오버레이를 표시하고mapGetters가게로 접근하기 위해서.이것은 사용자 데이터가 언제 이용 가능한지 알 수 있는 반응형 메커니즘을 제공할 것이다.다음은 단일 파일 구성 요소에 대한 일반적인 아이디어:

computed: {
    ...mapGetters({
        getLoggedInUser: 'GET_LOGGED_IN_USER',
        getIsUserAdmin: 'GET_IS_USER_ADMIN',
    })
}

....

<template>
    <content-overlay v-if="!getLoggedInUser">
         Loading...
    </content-overlay>

    ....
    <button v-if="getIsUserAdmin">Admin Button</button>
    <button v-if="!getIsUserAdmin">Regular User Button</button>

</template>

참조URL: https://stackoverflow.com/questions/48374270/when-to-initialize-vue-and-vuex-state