# Pinia 状态管理使用说明

## 目录结构

```
store/
├── index.js              # Pinia 实例
├── README.md             # 使用说明
└── modules/              # 状态模块
    ├── user.js           # 用户状态
    └── ...               # 其他模块
```

## 使用方式

### 1. 在组件中使用

```vue
<script setup>
import { useUserStore } from '@/store/modules/user.js'
import { storeToRefs } from 'pinia'

// 方式一：直接使用（推荐用于修改数据）
const userStore = useUserStore()

// 方式二：使用 storeToRefs（推荐用于读取，保持响应式）
const { token, userInfo, isLoggedIn } = storeToRefs(userStore)

// 调用方法
userStore.loginSuccess({ token: 'xxx', userInfo: {...} })
userStore.logout()
</script>
```

### 2. 在 JS 文件中使用

```javascript
import { useUserStore } from '@/store/modules/user.js'
import { createPinia } from 'pinia'

// 注意：在非组件中使用时，需要确保 pinia 已初始化
const userStore = useUserStore()
```

## 内置模块

### user.js - 用户状态

**状态：**
- `token` - 登录令牌
- `userInfo` - 用户信息对象

**计算属性：**
- `isLoggedIn` - 是否已登录
- `userName` - 用户名
- `userAvatar` - 用户头像

**方法：**
- `setToken(token)` - 设置 token
- `setUserInfo(info)` - 设置用户信息
- `loginSuccess(data)` - 登录成功处理
- `logout()` - 退出登录
- `updateUserInfo(info)` - 更新用户信息

## 创建新模块

在 `store/modules/` 目录下创建新文件：

```javascript
// store/modules/todo.js
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useTodoStore = defineStore('todo', () => {
  // 状态
  const list = ref([])
  
  // 方法
  const addTodo = (item) => {
    list.value.push(item)
  }
  
  return {
    list,
    addTodo
  }
})
```

## 注意事项

1. **数据持久化**：当前使用 `uni.setStorageSync` 手动持久化重要数据
2. **小程序兼容性**：Pinia 已兼容微信小程序
3. **响应式**：所有状态都是响应式的，组件会自动更新

## 迁移指南

从 `utils/userCache.js` 迁移到 Pinia：

**之前：**
```javascript
import { getUserInfo, isLogin } from '@/utils/userCache.js'
const info = getUserInfo()
```

**现在：**
```javascript
import { useUserStore } from '@/store/modules/user.js'
const userStore = useUserStore()
const info = userStore.userInfo
```