Vuex state on page refresh and multiple tabs

问题

In my app i use firebase API for users authentication

I save the login status as a boolean value in my vuex state

When the user logs in I set the login status to true and using this I hide the login button on the top menu and display the log out button and vice versa when the user logs out.

So i use vuex-persisted state to save the state for page refreshes

The dafault storage in vuex-persisted state is local storage

Instead of saving the state of store on locaal storage i want it to be saved in cookies...so i followed the same apprach as described in the vuex-persisted state documentationn

the problems I am facing are:

when i use the default storage i.e local storage it works but when i use cookies the state is not getting saved in the cookie and persisted state does not work
when i open the app on 2 different tabs and the user logs out in one tab the state is synced in both tabs but log out button is still shown in the other tab

my store

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:

The author of vuex-persistedstate here 👋 You've indeed try to set your cookies on a "secure connection". Try to set secure to false should do the trick. Otherwise open an issue on the repository 👍

回答2:

I had a similar issue and thought that persisted state cookies were not working. I changed "secure: true" to "secure: false" and it started working as described in the documentation. If you testing the app in a non SSL enabled environment like a localhost nodejs server, try the "secure: false" option.

回答3:

With bootstrap and vue js that works for me!

<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>

来源：https://stackoverflow.com/questions/43090136/vuex-state-on-page-refresh-and-multiple-tabs

标签

Vue.js

vuejs2

vuex