資訊專欄INFORMATION COLUMN
摘要：各位看官沒看過功能梳理的可以先閱讀下源碼學(xué)習(xí)一功能梳理前車之鑒有了源碼學(xué)習(xí)的經(jīng)驗，每次看認(rèn)真鉆研源代碼的時候都會抽出一小段時間來大體瀏覽一遍源代碼。大體了解這個源代碼的脈絡(luò)，每個階段做了什么，文件目錄的劃分。
各位看官 沒看過功能梳理的可以先閱讀下
Vuex源碼學(xué)習(xí)（一）功能梳理.
有了vue-router源碼學(xué)習(xí)的經(jīng)驗，每次看認(rèn)真鉆研源代碼的時候都會抽出一小段時間來大體瀏覽一遍源代碼。大體了解這個源代碼的脈絡(luò)，每個階段做了什么，文件目錄的劃分。下面我來帶大家梳理一下Vuex的脈絡(luò)。
Vuex與vue-router結(jié)構(gòu)的區(qū)別Vuex的結(jié)構(gòu)與vue-router結(jié)構(gòu)的核心區(qū)別就在與Vuex有一大批的輔助函數(shù)需要提供、這個并不在應(yīng)該Vuex這個類中，
所以Vuex的index.js只是一個出口文件，負(fù)責(zé)輸出Store、install、以及所有的輔助函數(shù)。而vue-router的index.js就是router的構(gòu)造函數(shù)。
我們看一下Vuex的index.js
只是一個簡單的輸出，回憶下我們?nèi)绾问褂贸跏蓟疺uex
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，
這一期只是單純的梳理脈絡(luò)，所以只是看一下Store的constrctor函數(shù)
new Store的過程首先要聲明一些空間用于存儲mutation、action、getters等，然后關(guān)鍵代碼
生成模塊與模塊鏈接完成模塊之間的鏈接。我們要把Vuex組織成一個樹形結(jié)構(gòu)，如果需要的話（有module） this._modules = new ModuleCollection(options);
_modules會放置被組織好的模塊們，如何組織的我們會在模塊與模塊鏈接的章節(jié)詳細(xì)解釋，這只需要知道，Vuex初始化的時候很早的就把模塊組織鏈接好了。
bind dispatch與commit方法然后對dispacth和commit方法進(jìn)行了設(shè)置
把這兩個函數(shù)的this執(zhí)行綁定在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 根據(jù)根模塊的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，這個就是經(jīng)過模塊鏈接之后的根結(jié)點的state。
然后用根結(jié)點state和根結(jié)點模塊，來初始化根結(jié)點以及遞歸的注冊所有模塊。
//重置storeVM resetStoreVM(this, state)
重置一下store的vm對象，這塊也是一個核心的點，會在以后章節(jié)講述vm對象的用處以及resetStoreVM函數(shù)的作用。
注冊插件最后Vuex支持各種插件
注冊一下插件。
上個圖吧：
這就是Vuex最核心的Store構(gòu)造函數(shù)的基本脈絡(luò)，以下的章節(jié)就要一點一點的去剖析每一步了，進(jìn)度變緩、難度加大。大家坐穩(wěn)扶好。
下一章講述install的時候做了哪些事情
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/102878.html
摘要：我們通常稱之為狀態(tài)管理模式，用于解決組件間通信的以及多組件共享狀態(tài)等問題。創(chuàng)建指定命名空間的輔助函數(shù)，總結(jié)的功能首先分為兩大類自己的實例使用為組件中使用便利而提供的輔助函數(shù)自己內(nèi)部對數(shù)據(jù)狀態(tài)有兩種功能修改數(shù)據(jù)狀態(tài)異步同步。 what is Vuex ? 這句話我想每個搜索過Vuex官網(wǎng)文檔的人都看到過， 在學(xué)習(xí)源碼前，當(dāng)然要有一些前提條件了。 了解Vuex的作用，以及他的使用場景。 ...
摘要：本次主要分享關(guān)于上一篇區(qū)域的學(xué)習(xí)。區(qū)域為的核心部分，它的結(jié)構(gòu)如下為了便于梳理思路，以上代碼省略了細(xì)節(jié)，只保留了輪廓脈絡(luò)。最終暴露給開發(fā)者的如下圖所示這里只分析了區(qū)域的結(jié)構(gòu)，下一次會深入到函數(shù)語句粒度。 本次主要分享關(guān)于上一篇區(qū)域2的學(xué)習(xí)。區(qū)域2為Zepto的核心部分，它的結(jié)構(gòu)如下 var Zepto = (function() { var $, zepto = {}; fu...
摘要：為了更清楚的理解它的原理和實現(xiàn)，還是從源碼開始讀起吧。結(jié)構(gòu)梳理先拋開，的主要源碼一共有三個文件，，初始化相關(guān)用到了和我們使用創(chuàng)建的實例并傳遞給的根組件。這個方法的第一個參數(shù)是構(gòu)造器。的中，在保證單次調(diào)用的情況下，調(diào)用對構(gòu)造器進(jìn)入了注入。 原文鏈接 Vuex 作為 Vue 官方的狀態(tài)管理架構(gòu)，借鑒了 Flux 的設(shè)計思想，在大型應(yīng)用中可以理清應(yīng)用狀態(tài)管理的邏輯。為了更清楚的理解它的原理和...
閱讀 2963·2021-09-10 10:51
閱讀 2296·2021-09-02 15:21
閱讀 3282·2019-08-30 15:44
閱讀 960·2019-08-29 18:34
閱讀 1733·2019-08-29 13:15
閱讀 3393·2019-08-26 11:37
閱讀 2764·2019-08-26 10:46
閱讀 1171·2019-08-26 10:26
