I cannot read vuex-persist in v-if

I am trying to use vuex-persist on nuxt.js but when try to read the data in a v-if doesn't work.

I created a new file inside plugins called vuex-persis.js with the following code:

import VuexPersistence from 'vuex-persist'

export default ({ store }) => {
  new VuexPersistence({
      storage: window.localStorage,
  }).plugin(store);
}

and into nuxt.config.js I added the following code:

plugins: [{ src: '~/plugins/vuex-persist', mode: 'client' }],

The code that I use in order to store and get data is the following:

this.$store.commit('login', { idToken });

store.state.isLogin

and I have added the following file inside the project ./store/index.js

export const state = () => ({
  isLogin: false,
  idToken: '',
});

export const mutations = {
  login(state, newState) {
    state.isLogin = true;
    state.idToken = newState.idToken;
  },
  logout(state) {
    state.isLogin = false;
    state.idToken = '';
  },
};

I have the following navbar when I try to get the data from store:

navbar-button(to='/board', v-if='$store.state.isLogin')
    p 
navbar-button(v-if='$store.state.isLogin', @click.native='logout')
    p 

but always enter in the same place, log in.

I tried to use a computed like this but doesn't work on the v-if

computed: {
    isLogin: function () {
      console.log(this.$store.state.isLogin);
      return this.$store.state.isLogin;
    },
  },

the console.log prints the value stored in the browser but the console.log in node prints always the default state.

Anyway, the console.log always prints the correct value stored in the localstorage.

Any idea about how can I use that data in the v-if?

Thanks

Via Active questions tagged javascript - Stack Overflow https://ift.tt/1BLizxI