深刻vuex原理(上)

前言

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原理(下)