vue.js - 页面刷新和多个选项卡上的 Vuex 状态

Question

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

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

当用户登录时，我将登录状态设置为 true，并使用它隐藏顶部菜单中的登录按钮并在用户注销时显示注销按钮，反之亦然。

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

vuex-persisted state默认存储是本地存储

我不想将存储状态保存在本地存储中，而是希望将其保存在 cookie 中...所以我遵循了与 vuex-persisted state 中描述的相同方法文档

我面临的问题是:

• 当我使用默认存储(即本地存储)时，它可以工作，但是当我使用 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 应该可以解决问题。否则在存储库上打开一个问题。