[源碼學習] Vuex

FreeZinG 發布于2019-08-19 18:18 / 2159人閱讀

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

原文鏈接

Vuex 作為 Vue 官方的狀態管理架構，借鑒了 Flux 的設計思想，在大型應用中可以理清應用狀態管理的邏輯。為了更清楚的理解它的原理和實現，還是從源碼開始讀起吧。總共 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
------------------------------------------------------------------

結構梳理

先拋開 middlewares，Vuex 的主要源碼一共有三個文件:

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

Store

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

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

override

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

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

Vue.use(Vuex)

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

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

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

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

getters

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

setter

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

總結

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

GPU云服務器云服務器 Vuex vuex cdn Vue_Vuex 源碼學習

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

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

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

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

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

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

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

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

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

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

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

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

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