Vue
### Vue 3 状态管理（中文说明）
在 Vue 3 中，管理应用状态（比如用户信息、全局配置、登录状态等）有多种方式，常用的有以下几种，根据项目复杂度可以选择不同的方案：
---
## 一、基础方式：使用 Composition API（适合简单场景）
如果你的应用比较小，状态只在几个组件之间共享，可以直接用 Vue 3 的 **`ref` / `reactive`** 配合 **Provide / Inject** 或 **Props / Emits** 来共享状态。
### 示例：使用 reactive 共享状态（非全局，适合父子/兄弟组件）
```javascript
// store.js
import { reactive } from 'vue'
export const state = reactive({
count: 0,
user: null
})
```
```vue
```
⚠️ 缺点：状态不是响应式全局共享的（除非通过 Provide/Inject 或导入同一个对象），不适合复杂应用。
---
## 二、推荐方式：使用 Pinia（官方推荐状态管理库）
**Pinia** 是 Vue 官方推荐的状态管理库，替代了 Vuex，更简单、类型友好、功能强大，适用于中大型项目。
### 1. 安装 Pinia
```bash
npm install pinia
```
### 2. 在 main.js 中配置 Pinia
```javascript
// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')
```
### 3. 创建一个 Store（比如用户登录状态）
```javascript
// stores/user.js
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useUserStore = defineStore('user', () => {
// 状态
const isLoggedIn = ref(false)
const userInfo = ref(null)
// 方法
const login = (user) => {
isLoggedIn.value = true
userInfo.value = user
}
const logout = () => {
isLoggedIn.value = false
userInfo.value = null
}
return {
isLoggedIn,
userInfo,
login,
logout
}
})
```
### 4. 在组件中使用 Store
```vue
```
```vue
欢迎，{{ userStore.userInfo?.nickname }}
```
✅ **优点：**
- 简单易用，API 清晰
- 支持 TypeScript
- 支持多个 Store，模块化管理
- 调试友好，支持 Vue Devtools
---
## 三、传统方式：Vuex（旧版，逐渐被 Pinia 取代）
如果你在老项目中看到 Vuex，它也是 Vue 的状态管理工具，但官方现在主推 **Pinia**，新项目不建议再使用 Vuex。
---
## 四、其他方式（按需选择）
| 方式 | 适用场景 | 说明 |
|------|----------|------|
| **Props / Emits** | 父子组件通信 | 简单直接，不适合跨层级 |
| **Provide / Inject** | 跨层级组件传值 | 适合深层嵌套组件，但不如 Pinia 管理全局状态方便 |
| **Composable + reactive/ref** | 小范围状态共享 | 适合逻辑复用，但全局状态仍需 Pinia |
| **Pinia** | 推荐，任何规模 | 官方推荐，模块化、支持 TypeScript |
---
## 总结（推荐方案）
| 项目规模 | 推荐方案 |
|---------|----------|
| 小型项目 / 几个组件共享状态 | Composition API（ref/reactive）+ Provide/Inject |
| 中型及以上 / 全局状态（如用户、主题、权限） | **Pinia（强烈推荐）** |
| 老项目维护 | Vuex（逐渐淘汰） |
---
🔧 **如果你要快速实现一个 Vue 3 的状态管理（比如用户登录、全局配置等），推荐直接使用 Pinia，简单高效，官方维护，对 TypeScript 支持友好。**