页面刷新和多个选项卡上的Vuex状态

Question

在我的应用程序中,我使用firebase API进行用户身份验证

我将登录状态保存为我的vuex状态中的布尔值

当用户登录时,我将登录状态设置为true并使用此选项隐藏顶部菜单上的登录按钮,并在用户注销时显示退出按钮,反之亦然.

所以我使用vuex-persisted状态来保存页面刷新的状态

处于vuex-persisted状态的dafault存储是本地存储

我没有将存储状态保存在locaal存储上,而是希望将其保存在cookie中......所以我按照vuex-persisted状态文档中描述的相同的apprach进行操作

我面临的问题是:

• 当我使用默认存储,即本地存储它工作,但当我使用cookie时,状态不会保存在cookie中,持久状态不起作用

• 当我在2个不同的选项卡上打开应用程序并且用户在一个选项卡中注销时,状态在两个选项卡中同步,但注销按钮仍显示在另一个选项卡中

我的商店

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'


import authStore from './modules/auth'
import statusStore from './modules/allStatus'

Vue.use(Vuex);

export const store = new Vuex.Store({
modules: {
    authStore,
    statusStore
},
plugins: [
     createPersistedState({ 
        getState: (key) => Cookies.getJSON(key), 
        setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true }) 
     })
]
});

Answer 1

vuex-persistedstate这里的作者你确实试图在"安全连接"上设置你的cookie.尝试设置secure到false应该做的伎俩.否则在存储库上打开一个问题

Answer 2

我遇到了类似的问题，并认为持久状态 cookie 不起作用。我将“secure: true”更改为“secure: false”，它开始按照文档中的描述工作。如果您在非 SSL 启用的环境（例如本地主机 Nodejs 服务器）中测试应用程序，请尝试“secure: false”选项。