【Vue2 ✨】Vue2 入门之旅（十）：Vuex 入门

在前面几篇文章中，我们学习了 Vue Router。本篇将介绍 Vuex，它是 Vue 官方提供的状态管理库，用来解决组件之间共享数据的问题。

---

目录

1. 为什么需要 Vuex
2. 安装与引入
3. 核心概念
   • state
   • getters
   • mutations
   • actions
4. 一个最小示例
5. 小结

---

为什么需要 Vuex

在 Vue 项目中，父子组件之间可以用 props 和 $emit 进行通信，但当层级很深或多个组件需要共享数据时，就会变得复杂。
这时就需要一个 集中式的状态管理 —— Vuex。

优点：

• 数据集中存放，方便管理
• 任意组件都能方便访问
• 改变数据有统一规范（mutation/action）

---

安装与引入

CDN 方式：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuex@3/dist/vuex.js"></script>

NPM 方式：

npm install vuex@3

---

核心概念

state

存放全局数据，相当于组件的 data。

const store = new Vuex.Store({state: {count: 0}
})

组件中访问：

this.$store.state.count

---

getters

类似于计算属性，用来从 state 派生数据。

const store = new Vuex.Store({state: { count: 0 },getters: {double: state => state.count * 2}
})

组件中访问：

this.$store.getters.double

---

mutations

用于修改 state，必须是 同步操作。

const store = new Vuex.Store({state: { count: 0 },mutations: {increment(state) {state.count++}}
})

组件中提交：

this.$store.commit('increment')

---

actions

用于处理异步逻辑，再通过 mutation 修改 state。

const store = new Vuex.Store({state: { count: 0 },mutations: {increment(state) {state.count++}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment')}, 1000)}}
})

组件中分发：

this.$store.dispatch('incrementAsync')

---

一个最小示例

<div id="app"><p>计数：{{ $store.state.count }}</p><button @click="$store.commit('increment')">+1</button><button @click="$store.dispatch('incrementAsync')">异步+1</button>
</div><script>
const store = new Vuex.Store({state: { count: 0 },mutations: {increment(state) {state.count++}},actions: {incrementAsync({ commit }) {setTimeout(() => commit('increment'), 1000)}}
})new Vue({el: '#app',store
})
</script>

---

小结

1. Vuex 是集中式状态管理工具，解决多组件共享数据的问题。
2. 核心概念：
   • state：存放数据
   • getters：派生数据
   • mutations：同步修改数据
   • actions：异步操作
3. 通过 commit 提交 mutation，dispatch 分发 action。

---

📚至此，《Vue2 入门之旅》系列的基础十篇就完整啦！后续可以考虑写一些进阶篇，比如 响应式原理、虚拟 DOM、性能优化。