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数据);

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

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值