前言

vuex作為vue生態的重要組成部分，是對store進行管理的一柄利劍。簡而言之，vuex是vue的狀態管理器。使用vuex可用使數據流變得清晰、可追蹤、可預測，更可以簡單的實現 類似時光穿梭 等高級功能，對于復雜的大型應用來講，vuex將變得尤為重要，對于 store的切分、store的module化、store的變更、store的追蹤 等等 store的管理工作，使用vuex 管理store會大大提高項目的穩定性，擴展性！本篇將通過vuex的源碼對vuex 的設計以及實現原理 進行剖析！

---

注：本篇文章只展示關鍵核心代碼，一來由于篇幅原因，二來展示核心代碼更容易讓人理解！再者，本篇屬于 vuex 高級篇，對于本篇章中 涉及的 vue 相關的機制 以及 vuex的 高級使用 等 不進行過多贅述！請自行前往官網查看！

---

準備

淺析vuex的構成

vuex 引入 State、Getter 的概念對狀態進行定義；使用 Mutation 和 Action對狀態進行變更；引入Module對狀態進行模塊化分割；引入插件對狀態進行快照、記錄、以及追蹤等；提供了mapState、mapGetters、 mapActions、 mapMutations 輔助函數方便開發者在vm中處理store。具體構成關系如下：

淺析vuex的使用

vuex的使用方式很簡單，具體使用細節請參見 vuex官網，本文為了剖析源碼方便，只進行簡單介紹！我們只需要利用vue的use機制將 實例化后的store對象 注入vue實例即可！如下圖：

核心代碼如下：

Vue.use(Vuex); // 1. vue的插件機制，安裝vuex
let store = new Vuex.Store({ // 2.實例化store，調用install方法state,getters,modules,mutations,actions,plugins
});
new Vue({ // 3.注入store, 掛載vue實例store,render: h=>h(app)
}).$mount('#app');復制代碼

對vuex的疑問

我們在使用vuex對store進行管理的同時，不禁會問：

• vuex的store是如何注入到組件中的？
• vuex的state 和 getter 是如何映射到 各個組件實例中自動更新的？

本篇章旨在解決以上疑問，讓我們一起深入vuex的原理，揭開vuex的神秘面紗吧！

探秘原理

本部分將針對以上疑問，通過源碼分析，剖析核心代碼，對問題進行解答。

疑問：vuex的store是如何注入到組件中的？

要解答這個問題，我們先從vuex的使用表象上著手，從上面的介紹我們知道，使用vuex之前我們要對vuex進行安裝！核心代碼如下：

Vue.use(Vuex); // vue的插件機制,安裝vuex插件
復制代碼

源碼分析
上面的代碼得益于vue的插件機制，會在調用vuex的 install方法時，裝載vuex! 所以我們直接關注 install方法的實現，其核心代碼如下：

Vue.mixin({ beforeCreate: vuexInit });
復制代碼

可見，store注入 vue的實例組件的方式，是通過vue的 mixin機制，借助vue組件的生命周期 鉤子 beforeCreate 完成的。即 每個vue組件實例化過程中，會在 beforeCreate 鉤子前調用 vuexInit 方法。下面，我們將焦點聚焦在 vuexInit 函數。 下面為 vuexInit 的核心代碼！

this.$store = typeof options.store === 'function'? options.store(): options.store
復制代碼

該代碼的核心問題是this的指向，得益于mixin機制，this將指向 vue組件實例！最終，我們可以再 vue組件實例上獲得vuex 的store 對象的引用 $store！圖示如下：

分析至此，我們已經得出該問題的答案！

結論

vuex利用了vue的mixin機制，混合 beforeCreate 鉤子 將store注入至vue組件實例上，并注冊了 vuex store的引用屬性 $store！

對于其余問題的解答，請前往 深入vuex原理(下)