面試官：說下 vuex 實現(xiàn)原理?
Vuex 是 Vue.js 專用的狀態(tài)管理模式和庫，統(tǒng)一管理應(yīng)用的全局狀態(tài)，解決組件之間的數(shù)據(jù)共享問題。其本質(zhì)原理是利用 Vue 提供的響應(yīng)式系統(tǒng)，配合 Vue 的數(shù)據(jù)響應(yīng)機制實現(xiàn)數(shù)據(jù)驅(qū)動視圖更新。
一、Vuex 設(shè)計核心（五大核心模塊）
Vuex主要包括如下幾個模塊：
模塊 | 功能 | 是否響應(yīng)式 |
State | 存儲全局狀態(tài)的數(shù)據(jù)對象 | ? |
Getters | 對 State 數(shù)據(jù)進行加工處理，類似組件內(nèi)的 computed 計算屬性 | ? |
Mutations | 同步修改 State 數(shù)據(jù)的唯一方法，觸發(fā)響應(yīng)式更新 | ?（只是觸發(fā)更新，不必響應(yīng)式） |
Actions | 提交 Mutations，可以包含異步邏輯 | ? |
Modules | 分模塊管理狀態(tài)，方便擴展與維護 | ? |
二、vuex 的實現(xiàn)原理（詳細(xì)拆解）
① Vue 響應(yīng)式基礎(chǔ)
Vuex 最根本的原理是基于 Vue 本身的數(shù)據(jù)響應(yīng)系統(tǒng)：
- 通過 new Vue() 或 Vue.observable 方法： 將 state 對象定義為 Vue 實例的 data 屬性或通過 Vue.observable 變成響應(yīng)式。
// 簡單的響應(yīng)式 state 實現(xiàn)示例
let state = Vue.observable({ count: 0 });- 當(dāng) state 數(shù)據(jù)變化時，任何使用 state 數(shù)據(jù)的組件都會自動響應(yīng)式更新。
② 核心實現(xiàn)——store 對象
- store 是一個單例對象，整個應(yīng)用僅有一個。
- store 實例包含 State、Getters、Mutations、Actions 等成員。
核心示意代碼：
class Store {
constructor(options) {
this._vm = new Vue({
data: {
$$state: options.state
}
});
this.getters = {};
Object.keys(options.getters || {}).forEach(getterName => {
Object.defineProperty(this.getters, getterName, {
get: () => options.getters[getterName](this.state)
});
});
this.mutations = options.mutations || {};
this.actions = options.actions || {};
}
// 提供 state 訪問方式
get state() {
return this._vm._data.$$state;
}
// mutation必須同步執(zhí)行
commit = (type, payload) => {
const mutation = this.mutations[type];
if (mutation) mutation(this.state, payload);
else console.error(`[vuex] unknown mutation type: ${type}`);
};
// action 可以異步
dispatch = (type, payload) => {
const action = this.actions[type];
if (action) return action(this, payload);
else console.error(`[vuex] unknown action type: ${type}`);
};
}③ Vuex 的輔助函數(shù)（輔助方法）
- 輔助函數(shù) mapState、mapGetters、mapMutations、mapActions，方便組件使用 store 中的數(shù)據(jù)與方法。
示例：
// vue組件內(nèi)使用vuex的輔助函數(shù)示例
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
computed: {
...mapState(['count']),
...mapGetters(['doubleCount'])
},
methods: {
...mapMutations(['increment']),
...mapActions(['incrementAsync'])
}
};④ 嚴(yán)格模式（strict mode）
嚴(yán)格模式下，只能通過 mutation 修改 state，防止不規(guī)范的 state 修改行為：
const store = new Vuex.Store({
strict: true
});嚴(yán)格模式原理是使用 Vue 提供的 watch API 監(jiān)聽 state 變化，判斷 state 變化是否是 mutation 導(dǎo)致的。如果不是，會給出警告。
三、vuex 流程示意圖（核心實現(xiàn)流程圖示）
Vue組件
│
dispatch (異步) → Actions ──commit──→ Mutations
│ │
└─────────→ commit (同步) ←───┘
│修改
▼
State (響應(yīng)式對象)
│
▼
通知組件更新四、vuex 常見的面試追問點：
面試官追問 | 推薦回答 |
state是如何實現(xiàn)響應(yīng)式的？ | 基于Vue自身的響應(yīng)式系統(tǒng)：使用Vue.observable或Vue實例實現(xiàn) |
為什么只能通過mutation修改state？ | 保證所有的狀態(tài)修改有跡可循，便于追蹤變化、調(diào)試與維護 |
為什么actions允許異步而mutations不允許異步？ | 因為mutation必須是可預(yù)測、可追蹤的同步修改狀態(tài)，異步邏輯統(tǒng)一封裝在actions中，更好維護 |
什么時候用 getters？ | 當(dāng)store數(shù)據(jù)需要做復(fù)雜計算或多組件共享計算邏輯時 |
五、總結(jié)：Vuex 實現(xiàn)原理的核心思想
- Vuex 實質(zhì)是利用 Vue 的響應(yīng)式系統(tǒng)。
- 統(tǒng)一狀態(tài)數(shù)據(jù)到單例 store 中，提供明確、規(guī)范的狀態(tài)修改方式（Mutation 同步、Action 異步）。
- 通過嚴(yán)格模式、輔助方法確保開發(fā)規(guī)范，提供良好開發(fā)體驗。
