为什么商店状态更新后视图没有更新？ Vue.js

Question

几周前我开始使用 vue js 构建应用程序。 我想要做的是构建一个用户登录的应用程序。 我使用一个函数将我从后端获得的令牌存储在本地存储中，然后这些函数检查令牌是否仍然有效。没问题，它工作得很好。 然后我想使用 vuex，这样我就可以从应用程序的任何地方获取用户的状态（登录或未登录）。现在，我被困了几个小时，就像状态改变后视图没有更新一样。我需要刷新我的页面才能真正看到正确的信息。 我在互联网上寻找这个问题，我知道有一个 vue.set，但我的理解是它只能应用于对象？

请在下面找到代码：我知道它看起来没有意义，我只是在屏幕上显示很多变量来构建我的应用程序：我正在显示当前令牌，它的检查结果是只是为了测试目的。 这里的问题是当状态改变时它不会得到更新，但是当我不使用 vuex 时它曾经工作过，具有计算的属性和方法：

在我的组件中

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

在我的组件中计算

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：我在控制台中没有收到任何错误，并且密钥不是帖子中的内容：)

Answer 1

提交应该由方法触发或在生命周期钩子内触发，建议使用计算属性获取存储状态，在组件脚本中你应该有：

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') 
}

模板会是这样的：

<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

好的，有兴趣的朋友：

我使用了 vue-storage-watcher npm 插件。

看起来它正在工作，但如果更有经验的开发人员有其他方法可以做到这一点，我仍然愿意。

再次感谢