手机网站制作要求,好玩的网页传奇游戏,深圳企业营销型网站,简单的房源展示网站开发背景
在 UniApp的开发中#xff0c;状态管理的目标是确保应用数据的一致性#xff0c;提升用户体验#xff0c;并简化开发者的工作流程。通过合理的状态管理#xff0c;可以有效地处理用户交互、数据同步和界面更新等问题。 此文主要用store来管理用户的登陆信息。
重要…背景
在 UniApp的开发中状态管理的目标是确保应用数据的一致性提升用户体验并简化开发者的工作流程。通过合理的状态管理可以有效地处理用户交互、数据同步和界面更新等问题。 此文主要用store来管理用户的登陆信息。
重要概念
1. 状态State状态代表了应用中数据的变化。在 UniApp Store 中这可能包括用户信息、插件列表、购物车内容、交易详情等。
1. 动作Action动作是触发状态变化的操作。例如用户点击购买按钮、更新插件信息或提交评分等行为都会产生相应的动作。集成步骤
创建store目录
在目录下创建index.js文件内容如下
import Vue from vue
import Vuex from vuexVue.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-状态对象的获取方法
