Vuex 源碼學習（一）

（一）Vuex 是什麼？

　　Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，

　　並以相應的規則保證狀態以一種可預測的方式發生變化。 —— 來自 Vuex 官方文檔的介紹

　　能夠這樣理解： 整個Vue程序中，將全部的狀態和其管理所有集中在一個單例 Store樹中，

　　　　　　            全部的逐漸均可以經過 Store 樹來訪問狀態。

　　React 也有專門的 Redux，也是依照 FaceBook 提出的Flux  」單向數據流「理念。

　　Action ==》 dispatch===》Store====》 View

Vuex 狀態管理的核心是：

　 （1）全部的數據更改都必須經過 mutaions 提交；

　 （2）store.commit() 來調用，或者在全局注入 store 以後，在任何地方均可以吃經過 this.$store.commit() 來定義提交方法；

　 （3）action 參與異步狀態管理；

　 （4）getter 能夠在既有的狀態基礎上派生出新的狀態。

 

（二）源碼解讀

        Vuex 源碼加註釋 <1千行。

　　一、總體結構：

　　,Vuex 對外暴露的API 以下圖：

　　

    二、Store 的 基本用法

　　構建使用 Vuex.Store方法以下：

var store = new Vuex.Store({
    modules: {
        acceptStore,
        applyStore
    }, // 數據狀態模塊
    strict:false, // 是否使用嚴格模式
    plugins:[] // 插件
});

 　    因爲 Vuex 是多模塊狀態數據集中管理，對modules的處理即是重中之重。

　　 一個Store模塊本質上返回的即是一個對象，這個對象中包含了以下屬性：

　　 

        namespaced： 是否啓用命名空間的模塊模式，

　　 state：當前Store模塊所有的數據集

　     mutations：相似於事件，提交mutation是更改store狀態的惟一方法，且必須是同步函數

　　 actions： 提交狀態數據至mutation,能夠包含任意異步操做，經過store.commit 分發

　　 getters：store的計算屬性，根據依賴項被緩存起來，當依賴項發生改變，則從新計算

　 三、Store的初始化

　　  Vuex源碼是採用ES6語法書寫的，以下：

　　    

　　 很明顯能夠看出，在 class  Store  的構造函數 constructor() 中，就是對 Store 的初始化。

　　 12 行----  constructor( options = { } ) 傳入了 默認參數，一個空對象。

　　  由於 Vuex 是基於 Vue 的， 判斷 Vue.js 是否被引入 以及 Vuex 中的 Vue 是否被成功初始化，

　　  不然 對當前模塊中 Vue 進行初始化。

　　  

　　  若是當前 Vuex.version>=2，則在 Vue 生命週期  「beforeCreate」 階段時， 執行 vuexInit()。

　　  const options = this.$options ,這裏的 this 是 Vue 組件實例。

　　  if(options.store) {  ...}  ，因而可知，在 Vue 實例化時，參數 store 名稱不可更改。

 new Vue({
        store，
　　　　 render: h => h(App)
 }).$mount('#app')

　　 若是 而且 給 Vue 組件 新增一個屬性 store 。

　　這也是爲何，咱們能夠在 Vue 組件中，使用   this.$store.commit('acceptStore/SET_MENU_LIST',val) 的緣由。