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

在进入任何路线之前，我的路线守卫将检查用户是否 '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”，但组件未获得更新状态。我不知道我做错了什么。请问我该如何解决？

Answer 1

您可以在商店中定义一个 getter，它将 return 的状态设为 isAdmin，然后使用 getter 从您的组件中获取值商店。

Answer 2

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

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

Vuex 在组件中更改后获取状态

Vuex Get State After Mutation in components

javascript

vue.js

vue-router

vuex

vuejs2