Vuex state on page refresh and multiple tabs

Question

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

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