Question

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

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

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

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

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

我希望将其保存在Cookie中，而不是将商店状态保存在本地存储中...所以我按照vuex-persisted state documentationn

中所述的相同评价进行操作

我面临的问题是：

当我使用默认存储，即本地存储时，它可以工作，但是当我使用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无效。我改变了＃34;安全：真实＆＃34;到＆＃34;安全：假＆＃34;它开始按照文档中的描述工作。如果您在非SSL启用的环境（如localhost nodejs服务器）中测试应用程序，请尝试＆＃34; secure：false＆＃34;选项。

Answer 3

使用适用于我的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>

页面刷新时的Vuex状态和多个标签

3 个答案: