页面刷新和多个选项卡上的Vuex状态 [英] Vuex state on page refresh and multiple tabs

问题描述

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

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

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

因此我使用vuex-persisted state保存页面刷新的状态

处于vuex持久化状态的dafault存储为本地存储

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

我面临的问题是：

• 当我使用默认存储(即本地存储)时，它可以工作，但当我使用Cookie时，状态不会保存在Cookie中，持久化状态也不起作用

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

我的商店

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 }) 
     })
]
});

推荐答案

vuex-persistedstateHERE👋的作者您确实尝试将Cookie设置为"安全连接"。尝试将secure设置为false应该可以做到这一点。否则，在存储库👍上打开问题

这篇关于页面刷新和多个选项卡上的Vuex状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！