通俗易懂Vuex源碼導讀2.2-resetStoreVM數據響應式的實現

resetStoreVM

• 參數介紹，store是store實例, state是根模塊的state對象，也是state樹結構入口， hot暫不介紹
• 定義getters對象，噔噔蹬蹬，這就是傳說中的getters對象。
• 定於computed變量

• 遍歷store中的getter容器_wrappedGetters，將容器中收集到的每個getter函數，經過Object.defineProperty方法，賦值到剛剛定義的store.getters對象中

  • 在forEachValue的回調函數中，fn爲具體getter函數，key爲getter函數的名字
  • 當訪問store.getters的getter函數時，經過設置get攔截，實際返回的是store._vm的同名函數，store._vm在後面定義
  • 往computed變量中，加入getter函數，當訪問computed[key]時，將調用getter函數自己，並將store實例傳遞進去
    
• 記錄slient，並在新建Vue實例時設置爲true，避免過多的日誌信息。在Vue實例建立完成後，設置回本來的值

• 定義store._vm變量，定義爲新建的Vue實例。

  • 並在vue實例的data中，經過$$state保存store實例自己
  • 並將剛剛定義的computed變量傳遞進入，當作vue的computed屬性。從而實現了getter函數的computed功能。getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。對應官網的介紹

• 設置嚴格模式，enableStrictMode，該函數內部

  • store.strict，在store的構造函數中定義，this.strict = options.strict，即配置項中設置嚴格模式配置參數
  • 經過Vue的watch功能，監聽this._data.$$state（與store根實例的state變量同一個地址，因此就是監聽store.state的變化）
  • 當state發生變化，但_committing爲false，即當前非commit操做時。將報錯
  • 非commit操做，即直接修改state的值，在嚴格模式下禁止運行，對應官網介紹

    
    

• 後續hot是設置熱重載功能，本人研究很少，暫不作講解

總目錄

• 0-全局介紹
• 1-Vuex的安裝

• 2-Store的建立及模塊樹介紹

  • 2.1-installModule模塊安裝及內容建立
  • 2.2-resetStoreVM數據響應式的實現
• 3-Vuex官方文檔對照說明