uni-app开发经验分享三: Vuex实现登录和用户信息留存

发布时间:2020-11-26 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了uni-app开发经验分享三: Vuex实现登录和用户信息留存前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在做用户登录的过程中,其实最重要的是登录成功后的数据要怎么储存,储存到哪里,这里我分享一个利用vuex来实现用户登录和用户数据留存的方法

vuex代码如下:

//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
//H5配置行
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

const store = new Vuex.Store({ //全局变量定义
	state: {
		hasLogin: false,//是否登录,user: "",//用户信息
	},mutations: {
		/*登录*/
		login(state,user) {
			state.hasLogin = true;
			state.user= user || null;
			uni.setStorage({//将用户信息保存在本地  
			    key: 'uerInfo',data: user  
			})  
		}
	},plugins: [createPersistedState()],//H5配置行
})

export default store

前端调用代码如下:

import vuex from "@vuex地址";

写入数据的方法如下:

vuex.commit("login",json数据);

如果有疑问和补充,欢迎在评论区留言(*^▽^*)。

总结


以上是前端之家为你收集整理的uni-app开发经验分享三: Vuex实现登录和用户信息留存全部内容,希望文章能够帮你解决uni-app开发经验分享三: Vuex实现登录和用户信息留存所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。