Data writing and obtaining methods of vuex user login information

the whole idea:

The foreground obtains user data, sends a post request to the background, after the verification is successful

The front desk accepts data and changes the user login status

Write login status and user data to state

In this way, multiple pages can directly use this.$store.getters.getuname to call the user information in the state

1. Send a request to the background, if the user name and password are successfully returned, use this.$store.dispatch('setLogin', true); to write the data to the state

Page: login.vue

Code:

 this.loginData = await getUserInfo(this.uname,this.pwd);
    console.log(this.loginData);
    if(this.loginData.res==1){
    
    
     this.$store.dispatch('setLogin', true);
     this.$store.dispatch('setAccount',this.loginData.obj.phone );

2. Write data to state

Page: action.js

Code:

setAccount ({
    
    commit}, platform) {
    
    
 commit('SET_ACCOUNT', platform);
},

3. Write data to state

Page: mutation.js

Code:

 SET_ACCOUNT (state, platform) {
    
    
   state.account = platform;
  },

4. Add a method to get the corresponding data in the state

Page: getter.js

Code:

getuname: (state) => state.account,

Use in homepage.vue
5. Use this.$store.getters.getuname to retrieve data

Page: login.vue

Code:

console.log( this.$store.getters.getuname) The
above VUE: vuex user login information data writing and obtaining method is all the content shared by the editor, I hope to give you a reference, and I hope everyone Support a lot.