时间:2021-05-26
整体思路:
前台获取用户数据,向后台发送post请求,验证成功后
前台接受数据,改变用户登录状态
将登录状态及用户数据写入到state中
这样多个页面就可以直接使用this.$store.getters.getuname调用state中的用户信息
1. 向后台发送请求,若成功返回用户名,密码,使用 this.$store.dispatch(‘setLogin', true);将数据写入到state中
页面: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.将数据写到state中
页面:action.js
代码:
setAccount ({commit}, platform) { commit('SET_ACCOUNT', platform);},3.将数据写到state中
页面:mutation.js
代码:
SET_ACCOUNT (state, platform) { state.account = platform; },4. 添加获取state中对应数据方法
页面:getter.js
代码:
getuname: (state) => state.account, homepage.vue中使用5. 使用this.$store.getters.getuname调取数据
页面:login.vue
代码:
console.log( this.$store.getters.getuname)以上这篇VUE:vuex 用户登录信息的数据写入与获取方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
vue概念:vuex是Vue配套的公共数据管理工具,它可以把一些共享的数据,保存到vuex中,方便整个程序中的任何组件直接获取或修改我们的公共数据;配置vuex
本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码,供大家参考,具体内容如下api.jsimportaxiosfrom'
在vue2项目中,组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的情况下(后台获取数据存入vuex,组件之间共享数据),那么就需要用vuex来管理
api:https://vuex.vuejs.org/zh/guide/getters.html场景:在登录时将登录得到的用户信息存储在vuex的state和s
vue的项目的登录状态如果用vuex状态管理,页面一刷新vuex管理的状态就会消失,这样登录路由验证就没有意义了。可以将登录的状态写到webStorage中进行