[英]Vuex Get State After Mutation in components
我对 state 管理非常陌生,我被困在一个 position 中。 任何帮助将不胜感激。
我的商店设置为:
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 中的 state 已成功变异为“isAdmin:true”,但组件未获得更新状态。 我不知道我做错了什么。 请问我该如何解决?
导出存储 object 而不是 function。 否则,您在main.js中传递给 Vue 应用程序的商店(将其提供给组件)将与您在路由保护中使用的商店不同。
export default new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {},
strict: true
});
您可以在 store 中定义一个 getter,它将返回 isAdmin 的isAdmin
,然后使用 getter 从 store 中获取组件中的值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.