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

Question

This is my 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 */
    })
}

App.vue:

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

Project.vue:

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

With that above code, I cannot get localStorage.user_id and localStorage.package_id as I expected. But if I change like the follow, it worked.

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

But I think setTimeout not good in that case. Is there any way to refactor this code? Thank you!

Answer 1

Try this: in your root component (it's usually const app = new Vue({ ... }) ) write the following:

import {localStorage} from 'localStorage'; // import your module if necessary
                                            // this is relative to the way you manage your dependencies.

const app = new Vue({

    //...

    data: function() {
        return {
            localStorage: localStorage;
        }
    }
})

Now whenever you want to use localStorage , access it from root component like this:

this.$root.localStorage

Hope this solves your problem.

Answer 2

Don't know your project structure ,but I guess it's probably an async issue. You got the user information async, so when Project.vue mounted, the request is not complete yet. As a result, the localstorage is empty at the monent.

There are two solutions for this:

1. Make sure Project.vue is not rendered before userinfo is complete. For example, things like <project v-if="userinfo.user_id" /> should works.

2. Use some data binding libary like vuex to bind userinfo to Project.vue instead of assign it in lifecycle like mounted or created .

Hope it helps.