Vuex源碼學習（二）脈絡梳理

chenjiang3 發布于2019-08-23 16:18 / 2272人閱讀

摘要：各位看官沒看過功能梳理的可以先閱讀下源碼學習一功能梳理前車之鑒有了源碼學習的經驗，每次看認真鉆研源代碼的時候都會抽出一小段時間來大體瀏覽一遍源代碼。大體了解這個源代碼的脈絡，每個階段做了什么，文件目錄的劃分。

各位看官沒看過功能梳理的可以先閱讀下
Vuex源碼學習（一）功能梳理.

前車之鑒

有了vue-router源碼學習的經驗，每次看認真鉆研源代碼的時候都會抽出一小段時間來大體瀏覽一遍源代碼。大體了解這個源代碼的脈絡，每個階段做了什么，文件目錄的劃分。下面我來帶大家梳理一下Vuex的脈絡。

Vuex與vue-router結構的區別

Vuex的結構與vue-router結構的核心區別就在與Vuex有一大批的輔助函數需要提供、這個并不在應該Vuex這個類中，

所以Vuex的index.js只是一個出口文件，負責輸出Store、install、以及所有的輔助函數。而vue-router的index.js就是router的構造函數。

我們看一下Vuex的index.js

只是一個簡單的輸出，回憶下我們如何使用初始化Vuex

Vue.use(Vuex)

export default new Vuex.Store(
  {
    state : ...,
    modules : ...
  }
)


main.js
// 引入vuex實例
import store from "./store"
new Vue(
  {
    store
  }
)

這可以看出來Vuex的核心類（Store）就在store.js這個文件中，

接下來看一下store.js中這個核心的類Store，

這一期只是單純的梳理脈絡，所以只是看一下Store的constrctor函數

new Store的過程首先要聲明一些空間用于存儲mutation、action、getters等，然后關鍵代碼

生成模塊與模塊鏈接

完成模塊之間的鏈接。我們要把Vuex組織成一個樹形結構，如果需要的話（有module）
this._modules = new ModuleCollection(options);

_modules會放置被組織好的模塊們，如何組織的我們會在模塊與模塊鏈接的章節詳細解釋，這只需要知道，Vuex初始化的時候很早的就把模塊組織鏈接好了。

bind dispatch與commit方法

然后對dispacth和commit方法進行了設置

把這兩個函數的this執行綁定在store實例上，
const store = this
const { dispatch, commit } = this
this.dispatch = function boundDispatch (type, payload) {
  return dispatch.call(store, type, payload)
}
this.commit = function boundCommit (type, payload, options) {
  return commit.call(store, type, payload, options)
}

installModule 根據根模塊的state與根模塊實例來遞歸注冊所有的模塊

// init root module.
// this also recursively registers all sub-modules
// and collects all module getters inside this._wrappedGetters
installModule(this, state, [], this._modules.root)

在模塊鏈接完畢之后可以拿到一個state，這個就是經過模塊鏈接之后的根結點的state。
然后用根結點state和根結點模塊，來初始化根結點以及遞歸的注冊所有模塊。

重置VM對象

//重置storeVM
resetStoreVM(this, state)

重置一下store的vm對象，這塊也是一個核心的點，會在以后章節講述vm對象的用處以及resetStoreVM函數的作用。

注冊插件

最后Vuex支持各種插件

注冊一下插件。

上個圖吧：

這就是Vuex最核心的Store構造函數的基本脈絡，以下的章節就要一點一點的去剖析每一步了，進度變緩、難度加大。大家坐穩扶好。

下一章講述install的時候做了哪些事情

GPU云服務器云服務器深度學習二脈絡梳理 Vuex

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102878.html

Vuex源碼學習（一）功能梳理

摘要：我們通常稱之為狀態管理模式，用于解決組件間通信的以及多組件共享狀態等問題。創建指定命名空間的輔助函數，總結的功能首先分為兩大類自己的實例使用為組件中使用便利而提供的輔助函數自己內部對數據狀態有兩種功能修改數據狀態異步同步。 what is Vuex ? 這句話我想每個搜索過Vuex官網文檔的人都看到過，在學習源碼前，當然要有一些前提條件了。了解Vuex的作用，以及他的使用場景。 ...

livem 2019-08-23 16:11 評論0 收藏0
Zepto.js源碼學習之二

摘要：本次主要分享關于上一篇區域的學習。區域為的核心部分，它的結構如下為了便于梳理思路，以上代碼省略了細節，只保留了輪廓脈絡。最終暴露給開發者的如下圖所示這里只分析了區域的結構，下一次會深入到函數語句粒度。本次主要分享關于上一篇區域2的學習。區域2為Zepto的核心部分，它的結構如下 var Zepto = (function() { var $, zepto = {}; fu...

kel 2019-08-20 13:31 評論0 收藏0
[源碼學習] Vuex

摘要：為了更清楚的理解它的原理和實現，還是從源碼開始讀起吧。結構梳理先拋開，的主要源碼一共有三個文件，，初始化相關用到了和我們使用創建的實例并傳遞給的根組件。這個方法的第一個參數是構造器。的中，在保證單次調用的情況下，調用對構造器進入了注入。原文鏈接 Vuex 作為 Vue 官方的狀態管理架構，借鑒了 Flux 的設計思想，在大型應用中可以理清應用狀態管理的邏輯。為了更清楚的理解它的原理和...

FreeZinG 2019-08-19 18:18 評論0 收藏0