[源碼學習] Vuex

FreeZinG 發(fā)布于2019-08-19 18:18 / 2227人閱讀

摘要：為了更清楚的理解它的原理和實現(xiàn)，還是從源碼開始讀起吧。結(jié)構(gòu)梳理先拋開，的主要源碼一共有三個文件，，初始化相關用到了和我們使用創(chuàng)建的實例并傳遞給的根組件。這個方法的第一個參數(shù)是構(gòu)造器。的中，在保證單次調(diào)用的情況下，調(diào)用對構(gòu)造器進入了注入。

原文鏈接

Vuex 作為 Vue 官方的狀態(tài)管理架構(gòu)，借鑒了 Flux 的設計思想，在大型應用中可以理清應用狀態(tài)管理的邏輯。為了更清楚的理解它的原理和實現(xiàn)，還是從源碼開始讀起吧。總共 1000 多行的代碼，讀起來也相對輕松。

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 的主要源碼一共有三個文件:

file	intro
index.js	Class Store， install，...
override.js	初始化 Vuex
util.js	相關 util（用到了 getWatcher 和 getDeep）

Store

我們使用 Store 創(chuàng)建 Vuex 的實例并傳遞給 Vue 的根組件。主要包含了 state 和 mutation。Store 創(chuàng)建了一個 data 為 state 的 Vue 實例，使用了 ES6 Class 的 get 和 set 對 state 做了映射，對 state 的重新 set 當然是不允許的，get 則映射到了 this._vm._data。

Store 提供了 dispatch 方法來完成對 state 的修改，和想象中的差不多，在 _mutations 里找到對應 type 的 mutation，參數(shù)并入 this.state 傳參調(diào)用。

override

作為一個 Vue 的插件，Vuex 需要被這樣引入:

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

Vue 的插件應當有一個公開方法 install。這個方法的第一個參數(shù)是 Vue 構(gòu)造器。 Vuex 的 install 中，在保證單次調(diào)用的情況下，調(diào)用 override 對 Vue 構(gòu)造器進入了注入。

override 中對 Vue.prototype._init 注入了 vuexInit，vuexInit 會在每個 instance 的 init hook 中調(diào)用。

第一步是綁定 store, Vuex 會尋找 options 中的 store 作為實例的 $store，在不存在時則以遞歸的方式尋找父組件中的 $store，因此在 Vuex 的項目中，store 只需要在根組件中注入即可。

第二步是處理 vuex, 分別處理其中的 getters 和 actions, 以 example/counter/Counter.vue 為例：

getters

Vuex 用 Object.defineProperty 為每個 getter 在 vm 上綁定了 data，特別的是 getter 作為單向僅 get 數(shù)據(jù)流，并不能被 set，所以對應的 setter 為報錯用的空函數(shù)。而 getter 的原理類似于 computed getter，特別的是使用了 store 的 uniqueId 為標識做了緩存，這樣同一個 getter 在所有組件中都會使用相同的 watcher。

setter

Action 相對要簡單一些，以 $store 作為 action 第一個參數(shù)，并將 action 綁定在 instance 上。形成了一個閉環(huán)，讓 action 訪問到 store。

總結(jié)

Vuex 源碼上粗略的分析基本就到這里了，其實很多地方的代碼都很值得細細研究，比如 Store 中的 middlewares 可以完成一些神奇的事情，這里就不一一分析了，畫了一張圖，按源碼的思路大概表達下數(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: {}    |
                           |                    |
                           |  }                 |
                           +--------------------+

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/79444.html

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

摘要：我們通常稱之為狀態(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)文檔的人都看到過，在學習源碼前，當然要有一些前提條件了。了解Vuex的作用，以及他的使用場景。 ...

livem 2019-08-23 16:11 評論0 收藏0
Vuex源碼學習（二）脈絡梳理

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

chenjiang3 2019-08-23 16:18 評論0 收藏0
一張思維導圖輔助你深入了解 Vue | Vue-Router | Vuex 源碼架構(gòu)

摘要：前言本文內(nèi)容講解的內(nèi)容一張思維導圖輔助你深入了解源碼架構(gòu)?？偨Y(jié)以上內(nèi)容是筆者最近學習源碼時的收獲與所做的筆記，本文內(nèi)容大多是開源項目技術揭秘的內(nèi)容，只不過是以思維導圖的形式來展現(xiàn)，內(nèi)容有省略，還加入了筆者的一點理解。1.前言本文內(nèi)容講解的內(nèi)容：一張思維導圖輔助你深入了解 Vue | Vue-Router | Vuex 源碼架構(gòu)。項目地址：github.com/biaochenxuy… 文...

weij 2019-05-23 16:27 評論0 收藏0
Vuex源碼學習（五）加工后的module

摘要：先看一下創(chuàng)建一個容器存放該模塊所有的子模塊存放自己未被加工的模塊內(nèi)容。是封裝的工具方法，用于遍歷對象的。這些方便高效的方法為之后的注冊。沒有看過moduleCollection那可不行！Vuex源碼學習（四）module與moduleCollection 代碼塊和截圖的區(qū)別代碼塊部分希望大家按照我的引導一行行認真的讀代碼的截圖是希望大家能記住圖中的結(jié)構(gòu)與方法，下面會對整體進行一...

2bdenny 2019-08-23 16:28 評論0 收藏0
自定義自己的vue-cli模板

摘要：自定義自己的模板在使用的過程中，常用的模板只為我們提供最基礎的內(nèi)容，但每次需要新建一個項目的時候就需要把之前項目的一些配置都搬過來，這樣就造成挺大的不方便，如果是作為一個團隊，那么維護一個通用的模板，我認為是挺有必要的。自定義自己的vue-cli模板在使用vue-cli的過程中，常用的webpack模板只為我們提供最基礎的內(nèi)容，但每次需要新建一個項目的時候就需要把之前項目的一些配置...

付永剛 2019-08-21 17:42 評論0 收藏0