javascript - Vuex 在组件中获取突变后的状态

Question

我对状态管理非常陌生，我陷入了一个困境。任何帮助将不胜感激。

我的商店设置为:

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;
 }

在进入任何路由之前，我的路由防护将检查用户是否为“管理员”，并相应地在组件中显示选项。

我的路线守卫设置为:

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”，但组件未获取更新的状态。我不知道我做错了什么。请问我该如何解决这个问题？

Answer 1

导出存储对象而不是函数。否则，您在 main.js 中传递给 Vue 应用程序(将其提供给组件)的存储将与您在路由防护中使用的存储不同。

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