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

在进入任何路线之前,我的路线管理员将检查用户是否为"管理员",并相应地在组件中显示选项。

我的路线警卫设置为:

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存储中的状态正在成功地变为"0";isAdmin:true"但是该组件没有得到更新的状态。我不知道我做错了什么。请问我该怎么解决?

导出存储对象而不是函数。否则,您传递给main.js中Vue应用程序的存储(将其提供给组件(将与您在路由保护中使用的存储不同。
export default new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {},
strict: true
});

您可以在存储中定义一个getter,它将返回isAdmin的状态,然后使用getter从存储中获取组件中的值。

最新更新