Vuex原始碼分析（二） state

首先總結

const store =

newvuex.store(,
// 這個state可以是乙個物件，也可以是乙個方法
modules:}}
})

這裡的state已經不像原始options那樣很多層級了，那麼store的內部結構如何？又是如何簡化state結構的呢？由於原始碼中存在很多非state相關處理，於是做了相應的簡化處理

首先是構造器

export

class
store
)...
// 把state賦值給了 vm.data.$$state，getters賦值給了vm.computed
// 然後使用vue的 $watch 方法，進行監控
this
._watchervm =
newvue()
// 這裡直接處理options中的屬性，將其生成乙個module樹
// 每個 module 物件都包含[state, getters, mutations, actions, modules]屬性
// modules 是子模組，也是 module 物件
this
._modules =
newmodulecollection
(options)
...// 處理完後 state = ，此時還沒有子模組的state
const state =
this
._modules.root.state
...// 彙總處理各模組物件上的[state, getters, mutations, actions]
// 於是根節點上的state就包含了所有state
installmodule
(this
, state,
,this
._modules.root)
// destroy原來的this._watchervm物件，然後新建乙個new vue() 對屬性重新監控
resetstorevm
(this
, state)
}get
state()
// 提示不允許直接設定 state
setstate
(v)}
}

根據從store物件傳來的options屬性，生成一系列module樹

export

default
class
modulecollection
/** * 根據 options 物件，生成模組
* * @path: 前置路徑，是乙個陣列，目的是處理多 modules 的命名空間
* @rawmodule: 當前module的原始options物件
*/register
(path, rawmodule, runtime =
true
)else
// 如果當前options.modules存在，依次建立子模組
if(rawmodule.modules))}
}}

export

default
class
module
}}

function

installmodule
(store, rootstate, path, module, hot))}
// 遍歷子模組，依次註冊
module.
foreachchild
((child, key)
=>
)}

vuex 原始碼分析 vuex原始碼解讀 簡易實現

原始碼解讀 開始之前，先貼個大綱 首先，我們從使用方法入手，一步步來看 store.js import vue from vue import vuex from vuex vue.use vuex export default new vuex.store data 2000 main.js im...

Vuex的原始碼分析

mapstate import from vuex export default 經過 mapstate 函式呼叫後的結果，如下所示 import from vuex export default countalias countpluslocalstate 再看一下 mapstate 引數為陣列的...

vuex原始碼實現

let vue 自定義foreach迴圈 author suzhe datetime 2019 07 28t11 12 17 0800 param obj description param classback description const foreach obj,classback 格式化模...