Vue状态管理

封面图 • 2025-10-02 • Vue

Vue 状态管理是 Vue 框架中用于管理组件之间共享状态的一种方式。随着应用复杂度的增加，组件之间的数据传递变得越来越复杂，直接通过 `props` 和 `events` 传递数据不再高效或可维护。因此，Vue 提供了多种状态管理方案。

---

## ✅ 一、Vue 的状态管理方式

### 1. **Vuex（官方推荐）**

**Vuex** 是 Vue 官方推荐的状态管理模式，适用于大型 Vue 应用程序。它提供了一个集中式的存储，用于管理所有组件的状态，并提供了以下特性：

- **State**：存储应用的状态。
- **Getters**：从 state 中派生出一些新状态（类似计算属性）。
- **Mutations**：更改 state 的唯一方式（同步操作）。
- **Actions**：处理异步操作，提交 mutations。
- **Modules**：将 store 分割成模块，便于管理。

#### 示例代码：
```javascript
// store.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
})
```

在 Vue 组件中使用：
```vue
<template>
  <div>{{ count }}</div>
  <button @click="increment">Add</button>
</template>

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['asyncIncrement']),
    increment() {
      this.$store.commit('increment')
    }
  }
}
</script>
```

---

### 2. **Pinia（Vue 3 推荐）**

**Pinia** 是 Vue 3 的新一代状态管理库，是 Vuex 的替代品，具有更简洁的 API 和更好的 TypeScript 支持。

#### 示例代码：
```javascript
// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
})
```

在组件中使用：
```vue
<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <div>{{ counter.count }}</div>
  <button @click="counter.increment()">Add</button>
</template>
```

---

### 3. **Vue 3 的 Composition API + Ref / Reactive**

对于小型项目或不需要全局状态管理的情况，可以使用 Vue 3 的 `ref` 或 `reactive` 来管理局部状态。

```vue
<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <div>{{ count }}</div>
  <button @click="increment">Add</button>
</template>
```

---

### 4. **Event Bus（不推荐）**

早期 Vue 中常用 `event bus` 进行跨组件通信，但这种方式容易导致状态混乱，不建议用于大型项目。

---

## ✅ 二、选择哪种状态管理？

| 场景 | 推荐方案 |
|------|----------|
| 小型项目 | `ref` / `reactive` |
| 中大型项目（Vue 2） | `Vuex` |
| 中大型项目（Vue 3） | `Pinia` |
| 跨组件通信 | `Event Bus`（仅限小规模） |

---

## ✅ 三、总结

- **Vuex** 是 Vue 2 的官方状态管理工具。
- **Pinia** 是 Vue 3 的现代状态管理工具，推荐优先使用。
- 对于简单应用，使用 `ref` 和 `reactive` 即可。
- 不要过度使用全局状态，合理划分组件和状态边界。

---

如果你有具体的项目场景或问题，我可以帮你选择最合适的状态管理方案 😊