一、前言

在開發中大型 Vue 應用時，我們常常會遇到多個組件之間共享數據、通信復雜的問題。例如：

• 多個組件需要訪問同一個用戶信息；
• 組件之間需要傳遞狀態或事件；
• 數據變更需要同步更新多個組件；

這時，Vuex 就派上用場了。它是 Vue 官方推薦的狀態管理模式，專為 Vue.js 應用程序開發提供集中式存儲管理。

本文將帶你深入了解：

• 什么是 Vuex？
• Vuex 的核心概念（State、Getter、Mutation、Action、Module）；
• 如何在 Vue 項目中安裝和使用 Vuex；
• 實際開發中的典型使用場景；
• Vuex 在 Vue 2 和 Vue 3 中的差異；
• 推薦的最佳實踐；

二、什么是 Vuex？

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式 + 庫。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

簡單來說，Vuex 就是一個全局的“倉庫”，所有組件都可以從這個倉庫中讀取或修改數據，從而實現跨組件的狀態共享。

三、為什么需要 Vuex？

? 沒有 Vuex 的問題：

• 父子組件傳值靠 props / $emit；
• 兄弟組件之間傳值要通過共同父級；
• 深層嵌套組件傳值困難；
• 多個組件依賴相同狀態，難以維護；

? 使用 Vuex 的優勢：

優勢	描述
集中式管理	所有組件共享一個狀態源
單向數據流	更加清晰的數據流向
可維護性高	所有狀態變更都在 store 中統一處理
調試友好	支持 Vue Devtools，方便查看狀態變化
提升開發效率	減少不必要的 props 和 events 傳遞

四、Vuex 的核心概念

Vuex 主要有五個核心模塊：

1.?State：狀態（數據）

用于保存應用程序的狀態，是驅動應用的數據源。

state: {count: 0,user: null
}

2.?Getter：獲取狀態（計算屬性）

類似于 Vue 的 computed 屬性，用于對 state 做一些派生處理。

getters: {doubleCount(state) {return state.count * 2}
}

3.?Mutation：更改狀態的方法（同步操作）

唯一可以修改 state 的方式，必須是同步函數。

mutations: {increment(state) {state.count++},setUser(state, user) {state.user = user}
}

4.?Action：異步操作狀態

用于處理異步邏輯（如請求 API），提交 mutation 來改變狀態。

actions: {async fetchUser({ commit }, userId) {const res = await getUserById(userId)commit('setUser', res.data)}
}

5.?Module：模塊化組織

當項目變得龐大時，可以將 store 分割成模塊，每個模塊擁有自己的 state、getter、mutation、action。

modules: {userModule,cartModule
}

五、如何在 Vue 項目中使用 Vuex

步驟 1：安裝 Vuex

npm install vuex@next --save

注意：如果你使用的是 Vue 2，請使用 vuex@3 版本。

步驟 2：創建 Store 實例

// src/store/index.js
import { createStore } from 'vuex'export default createStore({state: {count: 0},getters: {doubleCount: state => state.count * 2},mutations: {increment(state) {state.count++}},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment')}, 1000)}},modules: {}
})

步驟 3：掛載到 Vue 實例

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'createApp(App).use(store).mount('#app')

步驟 4：在組件中使用 Vuex

<template><div><p>當前計數：{{ count }}</p><p>雙倍計數：{{ doubleCount }}</p><button @click="increment">+1</button><button @click="incrementAsync">異步+1</button></div>
</template><script>
import { mapState, mapGetters, mapActions } from 'vuex'export default {computed: {...mapState(['count']),...mapGetters(['doubleCount'])},methods: {...mapMutations(['increment']),...mapActions(['incrementAsync'])}
}
</script>

📌 說明：

• 使用?mapState、mapGetters、mapMutations、mapActions?可簡化寫法；
• 也可以直接使用?$store.state.xxx?或?$store.dispatch()?直接調用。

六、Vuex 在 Vue 2 與 Vue 3 中的區別

功能	Vue 2（Vuex 3）	Vue 3（Vuex 4）
創建 Store 方式	new Vuex.Store({})	createStore({})
使用方式	Vue.use(Vuex)	app.use(store)
Composition API 支持	需配合?useStore	完全支持組合式 API
TypeScript 支持	支持	更好地支持
推薦程度	? 舊項目可用	? 新項目推薦使用

七、Vuex 的實際應用場景

場景	示例
用戶登錄狀態管理	存儲 token、用戶信息
購物車狀態共享	多頁面/組件共享購物車數據
多組件間通信	不同層級組件共享數據
表單狀態管理	保存表單輸入、校驗結果
全局加載狀態	顯示 loading 動畫
國際化語言切換	存儲當前語言并響應變化

八、Vuex 最佳實踐建議

建議	說明
保持 State 只讀	不能直接修改 state，只能通過 mutation
Mutation 必須同步	異步操作應放在 Action 中
Action 提交 Mutation	Action 負責執行異步邏輯后提交 mutation
合理拆分 Module	避免 store 過于臃腫
使用命名空間	模塊化時啟用 namespace 提高可維護性
封裝 map 輔助函數	提高代碼簡潔性和可讀性
配合 Vue Devtools	查看狀態變化、調試更高效
不濫用 Vuex	小型項目可考慮使用 reactive / ref 替代

九、總結對比表

概念	是否同步	是否可直接修改 state	是否推薦使用
State	?	?	?
Getter	?	?	?
Mutation	?	?（唯一方式）	?
Action	?（內部異步）	?（通過提交 mutation 修改）	?
Module	?	?	?（大項目必備）

十、結語

感謝您的閱讀！如果你有任何疑問或想要分享的經驗，請在評論區留言交流！