时间戳

首页 > 解决方案 > Vuex 状态在加载 vue 组件之前没有更新？

javascript - Vuex 状态在加载 vue 组件之前没有更新？

问题描述

有时令牌会提交到 Vuex 存储，有时不会。

userLogin() {
  axios.post('api/login', this.logindata,)            
  .then(response => {
    let token = JSON.parse(localStorage.getItem('token'));

    this.$store.commit('setToken', token);
    this.logindata = {};
    this.loaded = true;
    this.success = true;
    this.$router.push({path: '/'});
  });
}

这是store.js：

export default new Vuex.Store({
  state: {
    token: JSON.parse(localStorage.getItem('token')),
    isLoggedIn: !!localStorage.getItem('token'),
    cart: []
  },
  mutations: {
    setToken(state, token) {
      state.token = token;
    },
  }
});

这是Vue前端：

mounted: function () {       
  if (!this.$store.state.isLoggedIn) {
    this.$router.push('/login')
  }
}

结果：有时它会重定向到登录，有时则不会。有什么帮助吗？

标签： javascriptlaravelvue.jsvuejs2vuex

解决方案

我会v-if在您只想在登录后加载的组件上创建一个，您将在其中computed绑定一个属性，这样您就有了一个监听器。

<myComponent v-if="computedProperty"/>
computed: {
 computedProperty(){
   return this.$store.state.isLoggedIn
...

推荐阅读