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

Posted 2023-02-22

【中文标题】页面刷新和多个选项卡上的 Vuex 状态

【英文标题】：Vuex state on page refresh and multiple tabs

【发布时间】：2017-08-22 17:48:21

【问题描述】：

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

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

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

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

vuex-persisted状态的默认存储为本地存储

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

我面临的问题是：

当我使用默认存储（即本地存储）时，它可以工作，但是当我使用 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 ) 
     )
]
);

【参考方案1】：

使用适合我的 bootstrap 和 vue js！

<div id="app">
    <b-tabs content-class="mt-3" v-model="myIndex" @input="change()">
        <b-tab title="Tab 1">
        </b-tab>
        <b-tab title="Tab 2">
        </b-tab>
        <b-tab title="Tab 3">
        </b-tab>
    </b-tabs>
</div>

<script>

    let lecture = new Vue(
        el: '#app',

        data() 
            return 
                myIndex: 0, // Current tab
            
        ,

        mounted() 
            // Get the previous tab from the url
            this.myIndex = parseInt(window.location.hash.replace('#',''), 10);
        ,

        methods: 
            change () 
                // Save the current tab in url
                window.location.hash = this.myIndex;
            

        
    );

</script>

【参考方案2】：

vuex-persistedstate 的作者在这里? 您确实尝试将 cookie 设置为“安全连接”。尝试将secure 设置为false 应该可以解决问题。否则在存储库上打开一个问题?

【参考方案3】：

我遇到了类似的问题，并认为持久状态 cookie 不起作用。我将“secure：true”更改为“secure：false”，它开始按照文档中的说明工作。如果您在 localhost nodejs 服务器等未启用 SSL 的环境中测试应用程序，请尝试“secure: false”选项。