資訊專欄INFORMATION COLUMN
摘要：為了更清楚的理解它的原理和實(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)管理的邏輯。為了更清楚的理解它的原理和實(shí)現(xiàn)，還是從源碼開始讀起吧?？偣?1000 多行的代碼，讀起來也相對(duì)輕松。
cloc src/ ------------------------------------------------------------------ Language files blank comment code ------------------------------------------------------------------ JavaScript 5 53 141 389 ------------------------------------------------------------------ SUM: 5 53 141 389 ------------------------------------------------------------------ cloc test/ ------------------------------------------------------------------ Language files blank comment code ------------------------------------------------------------------ JavaScript 5 62 30 793 ------------------------------------------------------------------ SUM: 5 62 30 793 ------------------------------------------------------------------結(jié)構(gòu)梳理
先拋開 middlewares，Vuex 的主要源碼一共有三個(gè)文件:
| file | intro |
|---|---|
| index.js | Class Store， install，... |
| override.js | 初始化 Vuex |
| util.js | 相關(guān) util（用到了 getWatcher 和 getDeep） |
我們使用 Store 創(chuàng)建 Vuex 的實(shí)例并傳遞給 Vue 的根組件。主要包含了 state 和 mutation。Store 創(chuàng)建了一個(gè) data 為 state 的 Vue 實(shí)例，使用了 ES6 Class 的 get 和 set 對(duì) state 做了映射，對(duì) state 的重新 set 當(dāng)然是不允許的，get 則映射到了 this._vm._data。
Store 提供了 dispatch 方法來完成對(duì) state 的修改，和想象中的差不多，在 _mutations 里找到對(duì)應(yīng) type 的 mutation，參數(shù)并入 this.state 傳參調(diào)用。
override作為一個(gè) Vue 的插件，Vuex 需要被這樣引入:
import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex)
Vue 的插件應(yīng)當(dāng)有一個(gè)公開方法 install。這個(gè)方法的第一個(gè)參數(shù)是 Vue 構(gòu)造器。 Vuex 的 install 中，在保證單次調(diào)用的情況下，調(diào)用 override 對(duì) Vue 構(gòu)造器進(jìn)入了注入。
override 中對(duì) Vue.prototype._init 注入了 vuexInit，vuexInit 會(huì)在每個(gè) instance 的 init hook 中調(diào)用。
第一步是綁定 store, Vuex 會(huì)尋找 options 中的 store 作為實(shí)例的 $store，在不存在時(shí)則以遞歸的方式尋找父組件中的 $store，因此在 Vuex 的項(xiàng)目中，store 只需要在根組件中注入即可。
第二步是處理 vuex, 分別處理其中的 getters 和 actions, 以 example/counter/Counter.vue 為例：
gettersVuex 用 Object.defineProperty 為每個(gè) getter 在 vm 上綁定了 data，特別的是 getter 作為單向僅 get 數(shù)據(jù)流，并不能被 set，所以對(duì)應(yīng)的 setter 為報(bào)錯(cuò)用的空函數(shù)。而 getter 的原理類似于 computed getter，特別的是使用了 store 的 uniqueId 為標(biāo)識(shí)做了緩存，這樣同一個(gè) getter 在所有組件中都會(huì)使用相同的 watcher。
setterAction 相對(duì)要簡單一些，以 $store 作為 action 第一個(gè)參數(shù)，并將 action 綁定在 instance 上。形成了一個(gè)閉環(huán)，讓 action 訪問到 store。
總結(jié)Vuex 源碼上粗略的分析基本就到這里了，其實(shí)很多地方的代碼都很值得細(xì)細(xì)研究，比如 Store 中的 middlewares 可以完成一些神奇的事情，這里就不一一分析了，畫了一張圖，按源碼的思路大概表達(dá)下數(shù)據(jù)流的意思。O(∩_∩)O
+-----------+
| |
| Store +>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>+
| | v
|-----------| v
| state <<<<<<+ v
|-----------| ^ v
+>>>>>- distapatch ->>>>+ v
^ +-----------+ v
^ v
^ +--------------------+ v
^ | | v
^ | Component | v
^ | | v
^ |--------------------| v
^ +<<<<<----- $store <------<<<<<+
^ v |--------------------|
^ v | vuex: { |
^ v | |
^ +>>>>>----- getters: {}, |
^ | |
+<<<<<<<<<<<<<<<<<<<<<<<<<<----- actions: {} |
| |
| } |
+--------------------+
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79444.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的作用，以及他的使用場景。 ...
摘要：各位看官?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í)間來大體瀏覽一...
摘要：前言本文內(nèi)容講解的內(nèi)容一張思維導(dǎo)圖輔助你深入了解源碼架構(gòu)?？偨Y(jié)以上內(nèi)容是筆者最近學(xué)習(xí)源碼時(shí)的收獲與所做的筆記，本文內(nèi)容大多是開源項(xiàng)目技術(shù)揭秘的內(nèi)容，只不過是以思維導(dǎo)圖的形式來展現(xiàn)，內(nèi)容有省略，還加入了筆者的一點(diǎn)理解。1.前言 本文內(nèi)容講解的內(nèi)容：一張思維導(dǎo)圖輔助你深入了解 Vue | Vue-Router | Vuex 源碼架構(gòu)。 項(xiàng)目地址：github.com/biaochenxuy… 文...
摘要：先看一下創(chuàng)建一個(gè)容器存放該模塊所有的子模塊存放自己未被加工的模塊內(nèi)容。是封裝的工具方法，用于遍歷對(duì)象的。這些方便高效的方法為之后的注冊(cè)。 沒有看過moduleCollection那可不行！Vuex源碼學(xué)習(xí)（四）module與moduleCollection 代碼塊和截圖的區(qū)別 代碼塊部分希望大家按照我的引導(dǎo)一行行認(rèn)真的讀 代碼的截圖是希望大家能記住圖中的結(jié)構(gòu)與方法，下面會(huì)對(duì)整體進(jìn)行一...
摘要：自定義自己的模板在使用的過程中，常用的模板只為我們提供最基礎(chǔ)的內(nèi)容，但每次需要新建一個(gè)項(xiàng)目的時(shí)候就需要把之前項(xiàng)目的一些配置都搬過來，這樣就造成挺大的不方便，如果是作為一個(gè)團(tuán)隊(duì)，那么維護(hù)一個(gè)通用的模板，我認(rèn)為是挺有必要的。 自定義自己的vue-cli模板 在使用vue-cli的過程中，常用的webpack模板只為我們提供最基礎(chǔ)的內(nèi)容，但每次需要新建一個(gè)項(xiàng)目的時(shí)候就需要把之前項(xiàng)目的一些配置...
閱讀 3482·2021-09-02 09:53
閱讀 1804·2021-08-26 14:13
閱讀 2766·2019-08-30 15:44
閱讀 1325·2019-08-30 14:03
閱讀 1974·2019-08-26 13:42
閱讀 3025·2019-08-26 12:21
閱讀 1315·2019-08-26 11:54
閱讀 1909·2019-08-26 10:46
