구성 요소 변환 후 Vuex 상태 가져오기

구성 요소 변환 후 Vuex 상태 가져오기

나는 국가 경영에 매우 초심해서 한 자리에 갇혔다.어떤 도움이라도 대단히 감사합니다.

스토어 설정은 다음과 같습니다.

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default function() {
  const Store = new Vuex.Store({
    modules: {},

state: {
      isAdmin: false,
},

mutations: {
      changeAuthStatus(state, authStatus) {
        state.isAdmin = authStatus;
        console.log(state.isAdmin) //output: true
      }
},
actions: {
      changeAuthStatus({ commit }, authStatus) {
        commit("changeAuthStatus", authStatus);
      }
}

 });
  return Store;
 }

루트에 입력하기 전에 루트 가드는 사용자가 'Admin'인지 여부를 확인하고 그에 따라 컴포넌트에 옵션을 표시합니다.

루트 가드는 다음과 같이 설정됩니다.

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

import $store from "../store/index";
const store = $store();

let adminStatus = store.state.isAdmin;

const requireAuth = (to, from, next) => {
    adminStatus = true;
    store.dispatch("changeAuthStatus", authStatus);  
  }
  if (adminStatus) {
    next();
  } else next({ name: "Home" });
};

const routes=[
{
 {
    path: "/",
    name: "Home",
    component: () => import("components/Home.vue")
  },
    path: "/add/",
    name: "AddPost",
    beforeEnter: requireAuth,
    component: () => import("components/AddPost.vue")
  }
]

export default function(){
const Router = new VueRouter({routes});

  return Router;
}

AddPost.vue' 컴포넌트는 다음과 같이 설정됩니다.

<template>
<div>
    <div v-if="$store.state.isAdmin">
    <h1>Welcome Admin </h1>
    </div>
    
    <div v-else> Welcome Guest </div>
</div>
</template>

<script>
export default {
created(){
   console.log(this.$store.state.isAdmin); //output: false
}
}
</script>

서버에서 긍정적인 응답을 받으면 vuex-store의 상태가 "isAdmin:true"로 변환되지만 구성 요소가 업데이트된 상태를 가져오지 않습니다.내가 뭘 잘못하고 있는지 모르겠어.어떻게 하면 해결할 수 있을까요?

함수 대신 스토어 개체를 내보냅니다.그렇지 않으면 main.js에서 Vue 앱에 전달하는 스토어(컴포넌트에 제공하는 스토어)는 루트 가드에서 사용하는 스토어와 다릅니다.

export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  strict: true
});

스토어에서 다음 상태를 반환하는 getter를 정의할 수 있습니다.isAdmin그런 다음 getter를 사용하여 저장소에서 구성 요소의 값을 가져옵니다.

언급URL : https://stackoverflow.com/questions/65661677/vuex-get-state-after-mutation-in-components