{{ user.name }}
{{ icon }}
{{ label }}
```
**Provide / Inject 的特点：**
| 优点 | 缺点 |
| :--- | :--- |
| 解决跨层级通信问题，无需逐层传递 props | 破坏了组件的封装性，难以追踪数据来源 |
| 适合提供全局配置、主题、用户上下文等 | 过度使用会导致组件间耦合严重 |
| 与响应式系统配合良好 | 不适合频繁变化的数据（如表单输入） |
**使用建议：**
- **适合**：主题、语言、当前用户、全局配置等相对稳定的数据
- **不适合**：频繁变化的业务数据、组件间复杂的交互逻辑
---
## 4. 状态管理的"进化论"
前面我们讲了组件之间的通信方式，但当应用规模进一步扩大，单纯依靠组件自身的机制已经不够用了。这时候就需要专门的状态管理方案。
### 4.1 为什么需要专门的状态管理？
-
{todos.map(todo => (
- dispatch(toggleTodo(todo.id))} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }} > {todo.text} ))}
购物车 ({{ cartItemCount }})
总计: ¥{{ cartTotal }}
```
#### 5.2.2 Pinia：新一代的优雅之选
Pinia 是 Vue 团队官方推荐的新一代状态管理库，专为 Vue 3 设计，但也支持 Vue 2。
**Pinia 相比 Vuex 的优势：**
| 特性 | Vuex | Pinia |
| :--- | :--- | :--- |
| 语法 | 选项式 API | 组合式 API（更现代） |
| 类型支持 | 需要额外配置 | 原生 TypeScript 支持 |
| 代码量 | 需要 mutations、actions 分开 | 更简洁，直接修改 state |
| 模块化 | 需要 namespaced | 自动模块化 |
| 开发工具 | 支持 | 支持，且体验更好 |
**Pinia 代码示例：**
```javascript
// stores/counter.js
import { defineStore } from 'pinia'
// 方式1：选项式 API（类似 Vuex）
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
name: '计数器'
}),
getters: {
doubleCount: (state) => state.count * 2,
// 可以访问其他 getter
doubleCountPlusOne() {
return this.doubleCount + 1
}
},
actions: {
increment() {
this.count++
},
async fetchCount() {
const response = await fetch('/api/count')
const data = await response.json()
this.count = data.count
}
}
})
// 方式2：组合式 API（推荐，更符合 Vue3 风格）
import { ref, computed } from 'vue'
export const useCartStore = defineStore('cart', () => {
// State
const items = ref([])
const selectedIds = ref([])
// Getters
const totalCount = computed(() =>
items.value.reduce((sum, item) => sum + item.quantity, 0)
)
const totalPrice = computed(() =>
items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
)
// Actions
function addItem(product) {
const existing = items.value.find(item => item.id === product.id)
if (existing) {
existing.quantity++
} else {
items.value.push({ ...product, quantity: 1 })
}
}
function removeItem(productId) {
items.value = items.value.filter(item => item.id !== productId)
}
async function checkout() {
// 调用支付 API
const response = await fetch('/api/checkout', {
method: 'POST',
body: JSON.stringify({ items: items.value })
})
if (response.ok) {
items.value = [] // 清空购物车
}
}
return {
items,
selectedIds,
totalCount,
totalPrice,
addItem,
removeItem,
checkout
}
})
```
**在组件中使用 Pinia：**
```vue
购物车 ({{ cart.totalCount }})
{{ item.name }}
¥{{ item.price }} x {{ item.quantity }}
总计: ¥{{ cart.totalPrice }}
{['all', 'active', 'completed'].map(filter => (
))}
-
{todoStore.filteredTodos.map(todo => (
- todoStore.toggleTodo(todo.id)} /> {todo.text} ))}
总计: {todoStore.stats.total} |
进行中: {todoStore.stats.active} |
已完成: {todoStore.stats.completed}
{bears} bears around here...
Count: {count}
Doubled: {doubled}
Loading...
return Hello, {user.name}
}
```
---
## 6. 如何选择适合你的状态管理方案？
面对这么多选择，你可能会感到困惑。以下是一些实用的决策建议：
### 6.1 决策树
```
你的项目规模？
├── 小型项目 (< 10 个组件)
│ └── 使用组件自带的状态管理即可
│ （useState / ref）
│
├── 中型项目 (10-50 个组件)
│ ├── 使用 Vue？
│ │ └── Pinia（推荐）或 Vuex
│ └── 使用 React？
│ ├── 需要严格的数据流？→ Redux Toolkit
│ └── 追求简洁？→ Zustand
│
└── 大型项目 (> 50 个组件，多团队协作)
├── 使用 Vue？
│ ├── 需要严格规范？→ Vuex + Modules
│ └── 追求开发效率？→ Pinia
├── 使用 React？
│ ├── 企业级应用？→ Redux + Redux Toolkit
│ ├── 需要细粒度控制？→ Recoil / Jotai
│ └── 追求简洁？→ Zustand
└── 跨框架需求？
└── 考虑 RxJS 或原生事件机制
```
### 6.2 各方案适用场景速查表
| 如果你... | 推荐方案 | 理由 |
| :--- | :--- | :--- |
| 刚开始学 Vue 3 | Pinia | 官方推荐，语法简单，TypeScript 支持好 |
| 维护 Vue 2 老项目 | Vuex | 稳定成熟，生态丰富 |
| 做企业级 React 项目 | Redux Toolkit | 规范严格，调试工具强大 |
| 做中小型 React 项目 | Zustand | 极简，无样板代码 |
| 需要原子化状态管理 | Jotai / Recoil | 细粒度控制，派生状态强大 |
| 喜欢面向对象风格 | MobX | 自动追踪依赖，代码直观 |
| 追求极致性能 | 原生 Context + useReducer | 零依赖，完全可控 |
### 6.3 避坑指南
**不要这样用：**
```javascript
// ❌ 错误：直接修改 state
store.state.user.name = '李四'
// ❌ 错误：在组件外修改 state
setTimeout(() => {
store.count++
}, 1000)
// ❌ 错误：在 getter 中修改 state
getters: {
doubleCount(state) {
state.count *= 2 // 副作用！
return state.count
}
}
// ❌ 错误：不取消事件监听
export default {
created() {
EventBus.$on('event', this.handler)
}
// 忘记在 beforeUnmount 中取消订阅
}
```
**推荐这样用：**
```javascript
// ✅ 正确：通过 mutation/action 修改 state
store.commit('SET_USER_NAME', '李四')
// 或 Pinia：
store.userName = '李四' // Pinia 允许直接修改，因为它底层已经处理了响应式
// ✅ 正确：在 action 中处理异步
actions: {
async fetchUser({ commit }) {
const user = await api.getUser()
commit('SET_USER', user)
}
}
// ✅ 正确：getter 是纯函数
getters: {
doubleCount: (state) => state.count * 2
}
// ✅ 正确：及时取消订阅
export default {
created() {
this.unsubscribe = store.$subscribe((mutation, state) => {
console.log(mutation, state)
})
},
beforeUnmount() {
this.unsubscribe()
}
}
```
---
## 7. 实战：电商购物车状态管理设计
让我们综合运用前面的知识，设计一个电商购物车系统的状态管理方案。
### 7.1 需求分析
- 商品列表页可以添加商品到购物车
- 购物车页面可以查看、修改数量、删除商品
- 头部导航显示购物车商品数量
- 支持选择/取消选择商品，计算选中商品总价
- 支持全选/取消全选
- 数据持久化到 localStorage
### 7.2 状态设计（Pinia）
```javascript
// stores/cart.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
export const useCartStore = defineStore('cart', () => {
// ============ State ============
const items = ref([])
const selectedIds = ref([])
const isLoading = ref(false)
const error = ref(null)
// 从 localStorage 恢复数据
const initFromStorage = () => {
const stored = localStorage.getItem('cart')
if (stored) {
try {
const data = JSON.parse(stored)
items.value = data.items || []
selectedIds.value = data.selectedIds || []
} catch (e) {
console.error('Failed to parse cart data:', e)
}
}
}
// 持久化到 localStorage
const persist = () => {
localStorage.setItem('cart', JSON.stringify({
items: items.value,
selectedIds: selectedIds.value
}))
}
// ============ Getters ============
const itemCount = computed(() =>
items.value.reduce((sum, item) => sum + item.quantity, 0)
)
const totalPrice = computed(() =>
items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
)
// 选中商品相关计算
const selectedItems = computed(() =>
items.value.filter(item => selectedIds.value.includes(item.id))
)
const selectedTotalPrice = computed(() =>
selectedItems.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
)
const isAllSelected = computed(() =>
items.value.length > 0 && selectedIds.value.length === items.value.length
)
// ============ Actions ============
const addItem = (product) => {
const existing = items.value.find(item => item.id === product.id)
if (existing) {
existing.quantity += product.quantity || 1
} else {
items.value.push({
...product,
quantity: product.quantity || 1
})
}
persist()
}
const updateQuantity = (productId, quantity) => {
const item = items.value.find(item => item.id === productId)
if (item) {
if (quantity <= 0) {
removeItem(productId)
} else {
item.quantity = quantity
persist()
}
}
}
const removeItem = (productId) => {
items.value = items.value.filter(item => item.id !== productId)
selectedIds.value = selectedIds.value.filter(id => id !== productId)
persist()
}
const toggleSelection = (productId) => {
const index = selectedIds.value.indexOf(productId)
if (index > -1) {
selectedIds.value.splice(index, 1)
} else {
selectedIds.value.push(productId)
}
persist()
}
const toggleSelectAll = () => {
if (isAllSelected.value) {
selectedIds.value = []
} else {
selectedIds.value = items.value.map(item => item.id)
}
persist()
}
const clearCart = () => {
items.value = []
selectedIds.value = []
persist()
}
// 初始化
initFromStorage()
return {
// State
items,
selectedIds,
isLoading,
error,
// Getters
itemCount,
totalPrice,
selectedItems,
selectedTotalPrice,
isAllSelected,
// Actions
addItem,
updateQuantity,
removeItem,
toggleSelection,
toggleSelectAll,
clearCart
}
})
```
### 7.3 组件中使用
```vue
```
```vue
{{ product.name }}
¥{{ product.price }}