VUE:vuex 用戶登錄信息的數(shù)據(jù)寫(xiě)入與獲取方式

發(fā)布時(shí)間：2020-10-15 17:21:08 來(lái)源：腳本之家閱讀：289 作者：Schon_zh 欄目：web開(kāi)發(fā)

整體思路：

前臺(tái)獲取用戶數(shù)據(jù)，向后臺(tái)發(fā)送post請(qǐng)求，驗(yàn)證成功后

前臺(tái)接受數(shù)據(jù)，改變用戶登錄狀態(tài)

將登錄狀態(tài)及用戶數(shù)據(jù)寫(xiě)入到state中

這樣多個(gè)頁(yè)面就可以直接使用this.$store.getters.getuname調(diào)用state中的用戶信息

1. 向后臺(tái)發(fā)送請(qǐng)求，若成功返回用戶名，密碼，使用 this.$store.dispatch(‘setLogin', true);將數(shù)據(jù)寫(xiě)入到state中

頁(yè)面：login.vue

代碼：

 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.將數(shù)據(jù)寫(xiě)到state中

頁(yè)面：action.js

代碼：

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

3.將數(shù)據(jù)寫(xiě)到state中

頁(yè)面：mutation.js

代碼：

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

4. 添加獲取state中對(duì)應(yīng)數(shù)據(jù)方法

頁(yè)面：getter.js

代碼：

 getuname: (state) => state.account,
 homepage.vue中使用

5. 使用this.$store.getters.getuname調(diào)取數(shù)據(jù)

頁(yè)面：login.vue

代碼：

console.log( this.$store.getters.getuname)

以上這篇VUE:vuex 用戶登錄信息的數(shù)據(jù)寫(xiě)入與獲取方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

VUE:vuex 用戶登錄信息的數(shù)據(jù)寫(xiě)入與獲取方式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽