How can other pages get the data after the asynchronous update when updating data asynchronously through vuex?

there is a http request in a.vue. After the response, this.$store.commit ("userInfo", userInfo); ,

get the updated data through computed on the b.vue page 

userInfo(){
        return this.$store.state.userInfo
      },

there is a method in the b.vue page that needs to obtain this data: this.userInfo ,

when the page refresh is refreshed, the page request in the a.vue page may not be completed, and the b.vue page is about to obtain data, resulting in undefined problems.

how should this problem be solved?

Vuex vue.js
May.21,2022

Don't think so complicated. You don't get the this.userInfo preceded by a loading state, such as judging by one of the existing parameters

. 
computed: {
    isLoading(){
        return this.userInfo.token ? true : false;
    }
},
watch: {
    isLoading: {
        handler: function(val){
            if(val){// 
                console.log("start...")
            }
        },
        immediate: true
    }
}

wait until you get it and then execute your code

1: do not jump until the interface returns
2: set the default value for this.userInfo to avoid undefined, judge in the component template, and do not render

if it is not returned. 
userInfo(){
        return this.$store.state.userInfo||{}
      },
  1. if b relies on a's request response, it is more appropriate to put the asynchronous request in action.
  2. if b relies on asynchronous results, because asynchrony means that the response time is uncontrollable, the computed must set a pocket value so that the view can be updated naturally after the asynchronous response.
  3. if you want to get the userInfo before entering, that is, the route needs to be verified, and beforeEach should be set in the route as route authentication.

userInfo set a default value, such as empty object {} , other pages watch this userInfo , change the instructions userInfo information is obtained, and then perform the relevant action.

Previous: What does the engine shield plug-in AndroidStudio do? How to remove this plug-in

Next: The Vue child component is passed to the parent component, where currentTab is a variable. If this is not correct, how should I modify it?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu