从0到1构建uniapp应用-store状态管理

背景

在 UniApp的开发中,状态管理的目标是确保应用数据的一致性,提升用户体验,并简化开发者的工作流程。通过合理的状态管理,可以有效地处理用户交互、数据同步和界面更新等问题。

此文主要用store来管理用户的登陆信息。

重要概念

1.  状态(State):状态代表了应用中数据的变化。在 UniApp Store 中,
     这可能包括用户信息、插件列表、购物车内容、交易详情等。
1.  动作(Action):动作是触发状态变化的操作。
     例如,用户点击购买按钮、更新插件信息或提交评分等行为都会产生相应的动作。

集成步骤

创建store目录

在目录下创建index.js文件,内容如下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


const store = new Vuex.Store({
	//仓库中共有属性的集合,用于存储公共状态,只存储
	state: {
		hasLogin: false,//公共属性
		userInfo: {} //公共属性
	},
	//vuex中mutations是专门用来修改state中属性状态的方法集合(对象)
	mutations: {
		login(state, provider) { //方法名随便起,参数state是固定写法
			state.hasLogin = true;
			state.userInfo = provider;
			
			//store 存储json数据格式的用户信息
			uni.setStorageSync('userInfo', provider);
			uni.setStorageSync('thorui_token', provider.token)
			
			if(provider.roleList != null && provi
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值