Javascript Vuex存储状态缺少值

晚上好，我正在用vuex开发一个商店，在那里我管理登录程序；当该过程成功时，我应该在状态中注册TokenSession和角色

输入正确的凭据后，用户将访问主页并正确设置状态数据； 目前，我在router.js文件中使用beforEnter来保护站点的各个部分，以验证用户是否经过身份验证并且是管理员

但每次我移动到一个部分，存储的状态就会丢失所有数据，或者说回到初始状态，就好像没有发生突变一样；有什么问题吗

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import router from './router'

Vue.use(Vuex)


export default new Vuex.Store({
   state : {
        idToken:'',
        role:'',
    },

    mutations:{

        authUser(state, accesso){
            state.idToken=accesso.token;
            state.role=accesso.role;
        },

        logout(state){
            state.idToken = '';
            state.role = '';
        },
        },

    actions: {
        login({commit,state}, authData) {

                axios.post('http://localhost:8080/api/login', authData )
                    .then(res => {
                        let accesso = res.data
                       
                        let token = accesso.token
                        let role = accesso.role
                        console.log("role(dopo if):" + role)
                        if ( token !=null) {
                            localStorage.setItem('token', token)
                           
                            commit('authUser',accesso)
                            console.log("state dopo commit: " + state.role);
                            router.push("/home")

                        } else
                            {
                            alert('USERNAME O PASSWORD ERRATI')
                        }
                    }).catch(err => console.log(err))

        },
        logout({commit}){
                commit('logout')
                localStorage.removeItem('token')
                resolve()
            }

    },
    getters : {
        isAuthenticated: state => !!state.idToken,
        role: state => state.role,
        }
})

router.js文件是：

import Home from './components/Home.vue'
import Vue from 'vue'
import VueRouter from "vue-router";
import Dipendenti from './components/dipendenti/Dipendenti.vue'
import Login from './components/Login'
import ErrPage from './components/errPage.vue'
import store from './store'

Vue.use(VueRouter)

 const routes=[
     //pagina iniziale, visualizzo sempre la login per prima
    {path: '', component: Login},

     //pagina home contenente il calendario, tutti i loggati possono accedervi, solo admin può modificare
    {path: '/home', component: Home,
        beforeEnter:(to,from, next)=>{
        if(store.getters.isAuthenticated){ next() }
        else{ next('/login') }
        }},

     //pagina della Login
    {path: '/errPage', component: Login},

     //pagina con elenco dei dipendenti,  accesso alla pagina solo loggato e solo admin
    {path: '/dipendenti', component: Dipendenti,
        
        beforeEnter:(to,from, next)=>{

            if(store.getters.isAuthenticated==true && store.getters.role=="admin"){ next() }
            else{ next('/errPage') }
        }}]
export default new VueRouter({mode: 'history', routes})

---

当您导航到一个新页面时，它是通过Ajax加载还是进行完整页面加载？应该从App.vue页面的第页加载站点的各个部分，但每次移动页面都会完全重新加载。这可能就是为什么每次导航后您的存储都会重置，如果您可以解决该问题，那么它应该允许存储在页面之间持久存在。问题是我无法修复页面重新加载，我如何解决它？您可以添加一个示例，说明如何包含页面链接吗？