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插件。

它似乎正在运行，但是如果经验丰富的开发人员还有另一种方法可以使我保持开放状态。

再次感谢

为什么商店状态更新后视图未更新？ Vue js

2 个答案: