vuex mutations vuex原始碼解析

2021-10-11 02:42:20 字數 1765 閱讀 9142

本文將以**+注釋的方式講解vuex的實現

在開始之前，我們先看乙個vuex的使用舉例

import
我們把基本的功能都使用到了，那麼接下來我們來看一下vuex中都做了什麼

vuex初始化過程

初始化使用者響應式vm例項

在上面的舉例中，首先我們註冊了vuex外掛程式

vue
vue.use 會呼叫 vuex 的install方法（vue開發外掛程式），我們看一下 vuex 的 install 的方法實現：

// 檔案路徑：/src/store.js => install 函式
我們注意到 vuex 中使用到乙個 vue 全域性字段，在 install 的時候會先判斷是否重複註冊，防止重複註冊。

// 檔案路徑：/src/mixin.js
vuexinit 方法的實現：

如果配置項中含有store字段（開頭舉例時宣告的 store 變數）

當前 vue 例項（this）賦值 $store 欄位為 配置項的store字段，如果 store 欄位為函式則執行賦值返回結果，其他情況直接賦值

如果配置項不包含store字段，且當前例項有父級例項、父級例項已宣告$store字段

當前 vue 例項（this）賦值 $store 欄位為 父級例項的$store字段

走到這一步，我們完成了vuex外掛程式的註冊操作。

我們在註冊 vuex 外掛程式的註冊之後，例項化了 vuex.store。

const
我們看一下new vuex.store例項化都做什麼事情。

// 檔案目錄：/src/store.js => class store
主要步驟：

我們宣告的 state、mutations、actions、getters 的組合為乙個 module（常見為命名空間）

// 檔案目錄：/src/module/module.js

/**

// 檔案目錄：/src/store => class store => dispatch

// 檔案目錄：/src/store => class store => commit

// 檔案目錄：/src/helpers.js
使用示例

computed

// 檔案目錄：/src/helpers.js

// 檔案目錄：/src/helpers.js
使用示例

methods

// 檔案目錄：/src/helpers.js

// 檔案目錄：/src/helpers.js

azkaban web server原始碼解析

azkaban主要用於hadoop相關job任務的排程，但也可以應用任何需要排程管理的任務，可以完全代替crontab。azkaban主要分為web server 任務上傳，管理，排程 executor server 接受web server的排程指令，進行任務執行 1.資料表 projects 工...

JDK LinkedHashMap原始碼解析

今天來分析一下jdk linkedhashmap的源 public class linkedhashmapextends hashmapimplements map可以看到,linkedhashmap繼承自hashmap,並且也實現了map介面,所以linkedhashmap沿用了hashmap的大...

Redux原始碼createStore解讀常用方法

const store createstore reducer,preloadedstate enhancer 直接返回當前currentstate，獲取state值，return state 我覺得應該深轉殖乙個新的物件返回，不然有可能會被外部修改 function getstate consol...