背景问题
在大型应用中，状态管理变得复杂，需要处理状态持久化、跨模块通信、性能优化等问题。
方案思考
- 如何合理划分状态模块
- 如何实现状态持久化
- 如何优化状态访问性能
具体实现
基础状态管理：
// store/modules/base.ts - 基础状态管理import{defineStore}from'pinia';// 通用状态管理模板exportconstuseBaseStore=defineStore({id:'base',state:()=>({// 全局加载状态loading:false,// 全局错误状态error:null,// 全局配置config:{},// 用户偏好设置preferences:{theme:'light',language:'zh-CN',fontSize:'medium'}}),getters:{// 计算属性isLoading:(state)=>state.loading,hasError:(state)=>!!state.error},actions:{// 设置加载状态setLoading(status:boolean){this.loading=status;},// 设置错误状态setError(error:any){this.error=error;},// 更新用户偏好updatePreferences(newPrefs:Partial<any>){this.preferences={...this.preferences,...newPrefs};},// 重置状态reset(){this.$reset();}}});状态持久化：
// store/index.ts - 状态持久化import{createPinia}from'pinia';importtype{App}from'vue';import{createPersistedState}from'pinia-plugin-persistedstate';constpinia=createPinia();// 配置持久化插件pinia.use(createPersistedState({// 自定义存储方式storage:localStorage,// 指定需要持久化的storekey:(id)=>`__${id}__`,// 自定义序列化函数serializer:{serialize:JSON.stringify,deserialize:JSON.parse}}));// 针对特定store的持久化配置exportconstuseUserStore=defineStore({id:'user',state:()=>({userInfo:null,token:'',permissions:[]}),// 配置持久化persist:{key:'user-info',storage:localStorage,paths:['userInfo','token']// 只持久化特定字段}});效果验证
通过合理的状态管理，可以有效组织应用状态，提升开发效率和应用性能。
经验总结
状态管理需要根据业务特点进行合理设计，避免过度抽象或过于分散。
