Vue—— Vue3 + Node.js 后台管理系统 之 【状态管理最佳实践】

背景问题

在大型应用中，状态管理变得复杂，需要处理状态持久化、跨模块通信、性能优化等问题。

方案思考

• 如何合理划分状态模块
• 如何实现状态持久化
• 如何优化状态访问性能

具体实现

基础状态管理：

// 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']// 只持久化特定字段}});

效果验证

通过合理的状态管理，可以有效组织应用状态，提升开发效率和应用性能。

经验总结

状态管理需要根据业务特点进行合理设计，避免过度抽象或过于分散。