vue3学习日记(十八)：状态管理
Vue3 状态管理详解
Vue3 的状态管理主要通过 Pinia 或 Vuex 实现。Pinia 是官方推荐的状态管理库，专为 Vue3 设计，具有更好的 TypeScript 支持和更简洁的 API。Vuex 虽然仍可使用，但在 Vue3 中逐渐被 Pinia 取代。
Pinia 核心概念
- Store：状态管理的核心单元，包含状态（state）、计算属性（getters）、动作（actions）。
- State：存储响应式数据。
- Getters：类似于计算属性，用于派生状态。
- Actions：包含异步或同步逻辑，用于修改状态。
示例代码
import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {state: () => ({count: 0,}),getters: {doubleCount: (state) => state.count * 2,},actions: {increment() {this.count++;},},
});
使用场景
全局状态共享
- 适用于多个组件需要访问同一份数据的场景，如用户登录信息、主题设置等。
跨组件通信
- 当组件层级较深或兄弟组件需要共享数据时，状态管理可以避免繁琐的 props 和事件传递。
复杂业务逻辑
- 当业务逻辑涉及多个组件或异步操作时，状态管理可以集中处理逻辑，提高代码可维护性。
注意事项
避免过度使用状态管理
- 简单的组件间通信可以通过 props 和事件实现，无需引入状态管理。
模块化设计
- 将状态按功能模块拆分，避免单个 Store 过于臃肿。
TypeScript 支持
- Pinia 天生支持 TypeScript，建议充分利用类型推断和接口定义，提升代码健壮性。
性能优化
- 对于大型应用，避免在 Store 中存储过多非响应式数据，必要时使用
shallowRef或shallowReactive。
总结与建议
总结
- Pinia 是 Vue3 状态管理的首选，具有简洁的 API 和优秀的 TypeScript 支持。
- 状态管理适用于全局状态共享、跨组件通信和复杂业务逻辑的场景。
建议
- 新项目优先选择 Pinia，老项目可逐步迁移。
- 合理拆分模块，避免 Store 过度集中。
- 结合 Vue Devtools 调试状态变化，提升开发效率。