VUE: vuex用户登录信息的数据写入与获取方式 - 行业资讯 - 肥雀云

前台获取用户数据,向后台发送帖子请求,验证成功后

前台接受数据,改变用户登录状态

将登录状态及用户数据写入到状态中

这样多个页面就可以直接使用。美元store.getters.getuname调用状态中的用户信息

<强> 1。向后台发送请求,若成功返回用户名:密码,使用。美元商店。调度(setLogin,真的);将数据写入到状态中

页面:login.vue

代码: 　　　　　　这一点。loginData=https://www.yisu.com/zixun/await getUserInfo (this.uname this.pwd); 　　console.log (this.loginData); 　　如果(this.loginData.res==1) { 　　美元商店。调度(“setLogin”,真正的); 　　美元。store.dispatch (setAccount, this.loginData.obj。电话), 　　　　

<强> 2。将数据写到状态中

页面:action.js

代码: 　　　　　　setAccount({},平台){ 　　提交(SET_ACCOUNT,平台); 　　}, 　　　　

<强> 3。将数据写到状态中

页面:mutation.js

代码: 　　　　　　SET_ACCOUNT(状态,平台){ 　　状态。账户=平台; 　　}, 　　　　

<强> 4。添加获取状态中对应数据方法

页面:getter.js

代码: 　　　　　　getuname:(州)=比;state.account, 　　homepage.vue中使用　　　　

<强> 5。使用。美元store.getters.getuname调取数据

页面:login.vue

代码: 　　　　　　控制台。日志(这一点。store.getters.getuname美元) 　　　　