时间戳

首页 > 解决方案 > 使用 this.$router.go(-1); 后如何重新加载 localStorage VueJS；

javascript - 使用 this.$router.go(-1); 后如何重新加载 localStorage VueJS；

问题描述

这是我的 Login.vue：

mounted() {
    if (localStorage.login) this.$router.go(-1);
},
methods: {
    axios.post(ApiUrl + "/login") {
       ...
    }

    then(response => {
       ...
       localStorage.login = true;
       this.$router.go(0); /* Reload local storage */
    })
}

应用程序.vue：

mounted() {
      axios
          .get("/user")
          .then(response => {                      
               localStorage.user_id = response.data.user.id;
               localStorage.package_id = response.data.user.package_id;
           })
},

项目.vue：

mounted() {
     this.user_id = localStorage.user_id
     this.package_id = localStorage.package_id
}

localStorage.user_id使用上面的代码，我无法得到localStorage.package_id预期的结果。但如果我像下面这样改变，它就起作用了。

mounted() {
    const self = this
    setTimeout(function () {
      self.user_id = localStorage.user_id
      self.package_id = localStorage.package_id
      self.getProject();
    },1000)
}

但我认为setTimeout在那种情况下不好。有没有办法重构这段代码？谢谢！

标签： javascriptvue.js

解决方案

不知道你的项目结构，但我想这可能是一个异步问题。您获得了异步用户信息，因此在Project.vue挂载时，请求尚未完成。结果，本地存储目前是空的。

有两种解决方案：

  1. 确保Project.vue在 userinfo 完成之前不呈现。例如，<project v-if="userinfo.user_id" />应该工作。

  2. 使用一些数据绑定库，比如vuex将 userinfo 绑定到，而不是像orProject.vue那样在生命周期中分配它。mountedcreated

希望能帮助到你。

推荐阅读