从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 && provider.roleList != undefined && provider.roleList.length > 0){uni.setStorageSync('roleList', provider.roleList);}},logout(state) {state.hasLogin = false;state.userInfo = {};uni.removeStorageSync('userInfo');uni.removeStorageSync('thorui_token');uni.removeStorageSync('roleList');}},actions: {},getters: {getUserInfo(state) {return state.userInfo}}
})export default store

配置main.js

import store from './store'
Vue.prototype.store = store;const app = new Vue({...App,store
})

线上体验地址， 重点就是登陆部分的使用了store实现

相关state和mutations使用具体见

vuex之state-状态对象的获取方法