Vue传参Props还是Pinia

Pinia 适用场景

1. 全局状态管理

   • 多个不相关组件需要共享数据
   • 需要跨页面/路由共享状态

2. 复杂状态逻辑

   • 包含多个相互关联的状态
   • 有复杂的状态修改逻辑

3. 持久化需求

   • 需要将状态保存到localStorage/sessionStorage
   • 页面刷新后需要恢复状态（恢复最后一次修改的状态）

4. 异步操作管理

组件传参适用场景

1. 父子组件通信

   • props向下传递
   • emit向上传递

2. 局部状态共享

   • 仅在相邻组件间共享数据
   • 组件关系明确（父子、兄弟）

3. 一次性数据传递

   • 数据只需传递一次，不需要持久化
   • 简单的数据结构

选择依据

特性	Pinia	Props组件传参
数据范围	全局	局部
组件关系	任意组件	相关组件
复杂度	适合复杂状态	适合简单数据
持久化	支持	不支持
调试难度	中等	简单
性能影响	较大	较小

最佳实践

• 优先使用组件传参处理局部状态
• 当数据需要在多个不相关组件间共享时使用Pinia
• 避免过度使用全局状态管理

Pinia的持久化需求

// store/index.ts
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)export default pinia

// store/user.ts
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({userInfo: null,token: '',permissions: []}),actions: {setUserInfo(info) {this.userInfo = info}},// 持久化配置persist: {// 存储的键名key: 'user-store',// 使用的存储方式storage: localStorage,// 指定要持久化的字段paths: ['token', 'userInfo'],}
})