uniapp+vuex储存登录状态和用户数据

tech2022-08-28  106

首先我们在根目录下新建一个 store 文件夹,然后在里面新建一个index.js文件

里面的内容是,这里我就不讲创建过程了,可以去查下如何使用vuex,我这里写了两个方法,一个登陆保存,一个退出登录清除数据

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { hasLogin:false, //用户是否登录 userInfo:{} //用户数据 }, //mutations定义同步操作的方法 mutations: { // 登录 login(state,user){ //登录状态为已登录 state.hasLogin = true state.userInfo = user //储存用户数据到本地 uni.setStorage({ key: 'userInfo', data: user, }); console.log('登陆成功') console.log(state.hasLogin,state.userInfo) }, // 退出登录 logout(state,user){ //登录状态为未登录 state.hasLogin = false state.userInfo = {} //删除本地储存 uni.removeSavedFile({ key: 'userInfo', }) console.log('退出登录') console.log(state.hasLogin,state.userInfo) } }, actions: { } }) export default store main.js里面去挂载 import Vue from 'vue' import App from './App' import store from './store' //引入vuex // 挂载vuex Vue.prototype.$store = store; Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App, store }) app.$mount()

4.使用,在登录页面引入vuex 5.在组件中提交 Mutation 登录成功后保存用户数据并执行login方法

success: (res) => { console.log(res) switch (res.data.msg.status) { //登录成功 case 1: //获取用户数据 let userInfo = { userId: res.data.msg.user.userId, token: res.data.msg.token, phone: res.data.msg.user.userTel, userName: res.data.msg.user.userName, jurisdiction: res.data.msg.user.roleId, } //执行vuex里面的登录函数并把用户数据传输过去 this.login(userInfo)

6.每次进入应用前,由App.vue 中的周期函数进行监听,所以在加载函数中定义方法,从本地缓存中取 出用户数据,然后调用login方法,不需要发起网络登录请求。

<script> import { mapMutations } from 'vuex' export default { methods: { ...mapMutations(['login']) }, onLaunch: function() { const userInfo = uni.getStorageSync('userInfo'); //同步获取本地数据 //判断本地缓存是否存在数据 if (userInfo !=="") { //传到vuex里面储存起来,并改变登录状态 this.login(userInfo) } }, }

如果想清除登录状态就执行logout那个函数就可以了

import { mapMutations, mapState } from 'vuex' export default { data() { return { user: [], } }, computed: { ...mapState(['userInfo']) }, methods: { ...mapMutations(['logout']), // 是否退出登录 onremoveLogout() { var that = this uni.showModal({ title: '提示', content: '是否退出登录', success: function(res) { if (res.confirm) { that.logout(res) that.$link.nav('login') } else if (res.cancel) { console.log('用户点击取消'); } }, }) } } }

以上就是登录状态储存的全部内容了 小白一个,多多包涵

最新回复(0)