Question

我已经按照文档中的定义添加了vuex-persistedstate。 （确认并可以正常工作）

export default new Vuex.Store({
    modules: {
        auth,
    },
    plugins: [VuexPersistedState()]
});

我已经设置了路由器导航防护，以便在登录时重定向到首页

/* Auth based route handler */
router.beforeEach((to, from, next) => {
    if (to.meta.hasOwnProperty('requiresAuth')) {
        if (to.meta.requiresAuth === true) {
            let isAuthenticated = authStore.getters.isAuthenticated
            if (isAuthenticated(authStore.state) === true) {
                next()
            } else {
                next({name: 'login'})
            }
        } else {
            let isAuthenticated = authStore.getters.isAuthenticated
            console.log(authStore.state)
            if (isAuthenticated(authStore.state) === true) {
                next({name: 'home'})
            } else {
                next()
            }
        }
    } else {
        next()
    }
})

vuex持久状态将从本地存储中恢复存储，但不能在导航卫士之前恢复存储！

我可以提供源代码的任何必要部分进行评估。请根据需要评论您的请求。也欢迎实验解决方案。这对我来说只是一个私人培训应用程序！

感谢您的帮助！

Answer 1

我找到了一个有效示例。

由于路由器不是组件。

在路由器配置文件中-

~~import authStore from '@/stores/auth/store'~~

相反-

import store from '@/store'

在导航卫士中，我 已替换

~~let isAuthenticated = authStore.getters.isAuthenticated if(isAuthenticated(authstore.state) === true){...}~~

与-

let isAuthenticated = store.getters['auth/isAuthenticated']
if(isAuthenticated === true){...}

现在，有效就像魅力一样……

Answer 2

我知道这对@Vaishnav可能毫无用处，但是由于我最近没有在同一个兔子洞里摔倒，所以我想我会在这里找到一个解决方法，因为这是我发现的唯一要求这个问题。

在您的store/index.js中，您需要同时导出函数和存储对象。

更改此内容：

export default() => {
  return new vuex.Store({
  namespaced: true,
  strict: debug,
    modules: {
      someMod 
    }, 
    plugins: [createPersistedState(persistedStateConfig)] 
  }); 
};

至：

const storeObj = new vuex.Store({
  namespaced: true,
  strict: debug,
  modules: {
    someMod
  },
  plugins: [createPersistedState(persistedStateConfig)]
});

const store = () => {
  return storeObj;
};

export {store, storeObj}

然后，由于您现在已经更改了导出商店的方式，因此您还需要更改其导入方式。

您已在应用程序中的任何地方导入了商店，即：在main.js-> import store from '@/store'中，除router.js之外，您需要更改为import {store} from '@/store'

在您的router.js中仅使用import {storeObj} from '@/store'，并在路由器防护中使用它而不是store，即：storeObj.getters['someMod/someValue']

vuex持久状态无法与vue路由器导航防护一起使用

2 个答案: