Vuex原始碼講解系列(一)功能梳理

2021-09-13 14:33:33 字數 1848 閱讀 5279

好友的乙個關於vuex原始碼的文章,他不好意思發。我幫他發,哈哈哈~

這句話我想每個搜尋過vuex官網文件的人都看到過,

在學習原始碼前,當然要有一些前提條件了。

了解vuex的作用,以及他的使用場景。

會使用vuex,對基本api熟練掌握。

有一顆求知的內心(balabla的)。

vuex我們通常稱之為狀態管理模式,用於解決元件間通訊的以及多元件共享狀態等問題。官網文件中註明的場景十分影響框架開發的整體脈絡,也就是這個框架從一開始做就想解決這些問題,

(=》 符號代之模擬 ->符號代表 在vuex提供的輔助函式)

state : 資料倉儲,所有的資料都存在這裡。 =》 vue物件的data。

getters :可以搭配倉庫中的資料結合起來聯動相應的資料 =》 vue的計算屬性 -> mapgetters

mutation :更新資料倉儲中的資料 -> mapmutations

action :負責非同步操作(網路請求、定時器等內容)呼叫mutation來更新資料 -> mapactions

modules : 模組模式 提供了命名空間 使狀態管理支援了樹形結構。(畫重點

把這些api分成倆大類:

負責向vuex中輸入。

從vuex中獲取資料使用。

action 與 mutation 解決了所有向vuex更新資料的方式(同步與非同步)。

getters 與 state 解決了vue元件(也可以是vuex內部)從vuex獲取資料。

modules呢 當然不屬於這兩大類,它是乙個基石,他讓vuex有了樹形結構,

你可以將vuex組織成乙個模組,每個模組都有action、mutation、getters、state等方法。模組之間有了父子關係。

以上這些都是針對於vuex內部的一些方法,可以在vuex的例項上使用。

vuex的例項一般都會掛載到vue物件上。

為了方便使用vuex還提供了一組輔助函式

在使用vue進行開發的時候,我們有大量的states、getters、mutations、actions要使用,每個都使用vuex例項去呼叫會浪費很多**,尤其是在使用了命名空間(namespaced)之後,vuex例項去呼叫這些方法都要加上對應的命名空間,所以就有了以下四個方法,接收乙個namespace(可以為空),也就是命名空間字首,以及乙個物件、或者陣列。

mapstate 為元件建立計算屬性以返回 vuex store 中的狀態。

mapgetters 為元件建立計算屬性以返回 getter 的返回值。

mapmutations 建立元件方法分發 action。

mapactions 建立元件方法提交 mutation。

以上幾個方法都是為vue元件遍歷使用而產生的。

但是還不夠極致,每個都要寫命名空間,

輔助函式還提供了createnamespacedhelpers。建立指定命名空間的輔助函式,

vuex的功能首先分為兩大類:

vuex自己的例項使用 getters、mutations、actions

vuex為元件中使用便利而提供的輔助函式 mapgetters、mapmutations、mapactions、mapstate、createnamespacedhelpers

vuex自己內部對資料狀態(state)有兩種功能:

修改資料狀態 action:非同步 mutation : 同步。

獲取資料狀態 getter : 可以經過計算 state : 直接返回資料狀態。

vuex支援的模式:模組模式 modules,為vuex提供樹形結構,以及命名空間,幫助vuex層級分明。

下一章分析一下脈絡

QEMU原始碼分析系列 一)

1 qemu概述 qemu是一種快速的多體系結構 器,通過動態翻譯的技術達到了優異的 速度。目前,qemu支援兩種操作模式 對於全系統 模式,qemu目前可以支援的硬體列表如下 對於使用者態 模式,qemu支援的硬體列表如下 x86 32 and 64 bit powerpc 32 and 64 b...

TiKV 原始碼解析系列文章(一)序

tikv 是乙個支援事務的分布式 key value 資料庫,有很多社群開發者基於 tikv 來開發自己的應用,譬如 titan tidis。尤其是在 tikv 成為 cncf 的 sandbox 專案之後,吸引了越來越多開發者的目光,很多同學都想參與到 tikv 的研發中來。這時候,就會遇到兩個比...

TiKV 原始碼解析系列文章(一)序

tikv 是乙個支援事務的分布式 key value 資料庫,有很多社群開發者基於 tikv 來開發自己的應用,譬如 titan tidis。尤其是在 tikv 成為 cncf 的 sandbox 專案之後,吸引了越來越多開發者的目光,很多同學都想參與到 tikv 的研發中來。這時候,就會遇到兩個比...