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