title: Vuex state on page refresh and multiple tabs
body: <p>In my app i use firebase API for users authentication</p>
  
  <p>I save the login status as a boolean value in my vuex state</p>
  
  <p>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.</p>
  
  <p>So i use <a href="https://github.com/robinvdvleuten/vuex-persistedstate" rel="noreferrer">vuex-persisted state</a> to save the state for page refreshes</p>
  
  <p>The dafault storage in <strong>vuex-persisted state</strong> is local storage</p>
  
  <p>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 <a href="https://github.com/robinvdvleuten/vuex-persistedstate" rel="noreferrer">vuex-persisted state</a> documentationn</p>
  
  <p><strong>the problems I am facing are:</strong></p>
  
  <ul>
  <li><p>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</p></li>
  <li><p>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</p></li>
  </ul>
  
  <p><strong>my store</strong></p>
  
  <pre><code>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) =&gt; Cookies.getJSON(key), 
          setState: (key, state) =&gt; Cookies.set(key, state, { expires: 3, secure: true }) 
       })
  ]
  });
  </code></pre>