为什么在商店状态更新后视图没有更新？ Vuejs

Question

I started a few weeks ago using vue js to build apps. What i want to do is to build an app where the user get logged. I did it with a function that store the tokens i got from the back-end in a localstorage, then the functions checks if the token is still valid. No issue, it works perfectly. Then i wanted to use vuex so i can get the status of the user (logged in or not) from anywhere in the app. Now, i'm stuck since a few hours, it's like the view is not getting updated after the states changes. I need to refresh my page to actually see correct informations. I looked for this issue on the internet, i know there is a vue.set, but my understanding is it can only gets applied to objects ?

Please find below the code : I know it looks like it does not make sense, i just display a lot of variables to the screen to build my app : i am displaying current token, the result of the checking of it, it's juste for test purpose. The issue here is that it does not get updated when states changes, but it used to work when i did not use vuex, with computed properties and methods :

In my component

<p>Current token : {{ tokenToCheck }}</p>
    <p>{{ isValid }}</p>
    <p>{{ loggedIn }}</p>
    <p> {{ test }} </p>
    <div class="alert alert-success" v-if="loggedIn"><p>You are logged in</p></div>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import jwt from 'jsonwebtoken'

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        tokenToCheck: localStorage.getItem('token'),
        isValid: 'test',
        isLogged: true
    }, 
    getters: {
        isLogged: (state) => {
            return state.isLogged; 
        }
    },
    mutations: {
        CHECK_TOKEN(state) {
            try{
                jwt.verify(state.tokenToCheck, 'RANDOM_TOKEN');
                state.isValid = 'ok';
                state.isLogged = true;
                return true;
            } catch(error) {
                console.log(error);
                console.log(state.tokenToCheck);
                console.log('erreur test token'); 
                state.isValid = "expiry"; 
                state.isLogged = false;
                return false;
            }
        }
    }
});

Computed in my component

export default {

  name: 'Home',
  data() {
    return {
      pseudo: '', 
      test: localStorage.getItem('token'), 
      password: '', 
      errorMessage:'',
      token: '',
      isAlert: false
    }
  },
  computed: {
    loggedIn() {
      return this.$store.getters.isLogged; 
    }, 
    isValid(){
      return this.$store.state.isValid;
    },
    tokenToCheck() {
      return this.$store.state.tokenToCHeck;
    }
  },
  mounted() {
    this.$store.commit('CHECK_TOKEN');
  },

Ps: i am not getting any error in the console, and the secret key is not what it is in the post :)

Answer 1

The commit should be triggered by a method or inside a life cycle hook and the store state is recommended to be gotten using computed property, in the component script you should have :

computed:{
  loggedIn() {
      return this.$store.getters.isLogged; 
    },
  isValid(){
    return this.$store.state.isValid
   },
  getTokenToCheck(){
     return  this.$store.state.tokenToCheck
  }
},

mounted(){
this.$store.commit('CHECK_TOKEN') 
}

the template will be like :

<p>Current token : {{ getTokenToCheck }}</p>
<p>{{isValid }}</p>
<p>{{ loggedIn }}</p>

<div class="alert alert-success" v-if="loggedIn"><p>You are logged in</p></div>

Answer 2

Ok, for those who are interested :

I used vue-storage-watcher npm plugin.

It looks like it's working, but i am still opened if more experienced developers have another way to do it.

Thanks again