《Vue3 Pinia 实战：封装全局状态管理（附源码）》

# 🔥 Vue3 Pinia 实战：封装全局状态管理（附源码）

在Vue3生态中，Pinia作为新一代状态管理工具，以其简洁API和TypeScript友好特性迅速成为开发者新宠。本文将带你实战封装Pinia全局状态管理，让你的项目代码更优雅！🚀

## 🌟 为什么选择Pinia？

相比Vuex，Pinia具有：
- 更简洁的API设计 ✨
- 完整的TypeScript支持 📦
- 模块化自动注册 🧩
- 组合式API完美兼容 💎

## 🛠️ 核心封装步骤

1. **基础Store封装**
```javascript
// stores/user.ts
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
 state: () => ({
  name: 'Guest',
  token: ''
 }),
 actions: {
  login(userInfo) {
   this.name = userInfo.name
   this.token = userInfo.token
  }
 }
})
```

2. **全局注册与持久化**
```javascript
// main.ts
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

app.use(pinia)
```

3. **封装统一访问方法**
```javascript
// utils/store.ts
export function useStore() {
 return {
  user: useUserStore(),
  app: useAppStore()
  // 其他store...
 }
}
```

## 💡 最佳实践建议

- 按业务模块划分store 📂
- 使用`storeToRefs`解构保持响应式 ⚡
- 复杂逻辑使用`setup`语法更灵活 🧠
- 配合`watch`实现状态监听 👀

## 🎁 源码获取

完整项目源码已上传GitHub，包含：
- 模块化store示例 📦
- 类型安全封装 🔒
- 持久化配置 💾
- 单元测试用例 ✅

访问 [GitHub仓库](https://github.com/example/pinia-demo) 获取完整代码！克隆即用，快速上手Pinia最佳实践！🎉

Pinia让状态管理变得简单而强大，赶紧在你的下一个Vue3项目中尝试吧！💪 如有问题，欢迎在评论区交流讨论~ 💬