手寫Vuex原始碼

vuex是基於vue的響應式原理基礎，所以無法拿出來單獨使用，必須在vue的基礎之上使用。

main.js

1 import store form './store' //

引入乙個store檔案2​
3new
vue()

store.js

1 import vuex from 'vuex'2​

3vue.use(vuex) 4​
5//通過vuex中的乙個屬性 store 建立乙個store的例項
6  export default
newvuex.store(,
10      mutations: 
15},
16actions: , payload) ,1000)21}
22}23})
24//
mutations中增加非同步操作 嚴格模式下會直接報錯，普通模式下不會報錯但不合法

首先我們要清楚vuex的定位，它是乙個外掛程式。且必須基於之上vue來使用，為什麼這麼說呢，因為他的資料響應是基於vue的。

①state驅動應用的資料來源。

②gettergetter的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生變化了改變才會被重新計算（由此你是不是想到了計算屬性，對完全可以這麼理解）。

③mutation進行vuex中store狀態的更改，也是官方規定更改狀態的唯一途徑。

④action進行非同步操作的場所，但是更改資料還是需要commit提交。

⑤module單一狀態樹物件比較複雜，vuex允許我們將store分割成多模組，每個模組擁有自己獨立的內容。

store.js

先建立乙個入口檔案

1 import vue from 'vue'2//

import vuex from 'vuex' 官方的vuex外掛程式
3  import vuex from './vuex/index1' //
自己寫的vuex4​
5  vue.use(vuex) //
缺省會執行當前外掛程式的install方法6​
7//通過vuex中的乙個屬性 store 建立乙個store的例項
8  export default
newvuex.store(,
15mutations: 
19},
20},
21b: ,
25mutations: 
29},
30modules: ,
35mutations: 
39},40}
41}42}
43},
44state: ,
47mutations: 
51},
52actions: , payload) , 1000)57}
58},
59getters: 63}
64  })

index1.js

這邊會暴露出乙個install方法，vue.sue()的時候會呼叫它。還有乙個提供例項化的store類

1

let vue
2  const install = (_vue) => else14}
15})16}
17​18​
19  class store 
26})27}
2829
//es6 的訪問器
30get state() 
3334
this.getters ={}
35this.mutations ={}
36this.actions ={}
37//
1、需要將使用者傳入的資料進行格式化操作
38this.moudules = new
modulescollections(options)39​
40//
2、遞迴的安裝模組
41      installmodule(this,this.state,, this
.modules.root)42​
43//
呼叫44      commit = (mutationname, payload) =>
4849      dispath = (actionname, payload) =>52}
53​54//
定義乙個foreach遍歷當前物件屬性然後執行乙個**函式,後面要用到
55  const foreach = (obj, callback) =>)59}
60​61//
格式化使用者資料
62class modulecollection 
67register(path, rootmodule) ,
71state: rootmodule.state72}
73if(!this
.root)  else
, this
.root)
80              parentmodule._childen[path[path.length - 1]] =rawmodule81}
8283
//如果有子模組
84if
(rootmodule.modules) )88}
89}90}
91​92//
遞迴安裝模組
93function
installmodule(store, rootstate, path, rawmodeule) , rootstate)
99           vue.set(parentstate, path[path.length -1],rawmodule.state)
100}
101102      let getters = rawmodule._raw.getters //
取使用者的getter
103if
(getters) 
109})
110})
111}
112113      let mutations = rawmodule.raw.mutations //
取使用者的mutation
114if
(mutations) )
118          arr.push((plyload) =>)
121}
122123      let actions = rawmodule._raw.actions //
取使用者的action
124if
(actions) )
130})
131}
132133
//遞迴
134      foreach(rawmodule._childen, (modulename, rawmodule) =>)
137  }

1、作為外掛程式引入，執行install方法呼叫vue.mixin在vue全域性生命週期混入乙個方法，將vuex中定義的資料來源掛載到this.$store,即當前元件的例項上。

2、state 直接new vue例項，將資料來源傳入。完成資料來源響應式操作。

3、getters 遞迴遍歷使用者傳入的getters物件，拿到每個裡面每乙個函式，通過object.definedproperty屬性處理。當get函式讀取compile，觸發get呼叫相應函式（函式內部自動傳入當前資料來源state作為引數），完成資料響應。

4、mutations 遞迴遍歷使用者傳入的mutations 物件，將相同名稱下的函式都掛載到當前例項的mutations陣列中，完成訂閱。commit的時候拿到對應的函式名稱進行遍歷mutations陣列呼叫對應名稱函式，完成發布。

5、actiosns 操作和mutations一樣。

6、module 是將使用者傳入的資料進行格式化，格式化好以後執行上面的安裝模組的方法。具體檢視上方installmodule方法的詳細操作。

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原始碼實現

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

手寫bind原始碼

三個方法的相同點 目標函式被呼叫時，改變this的指向的值 三個方法都是函式的方法，掛在在function.prototype上 不同點 目標函式呼叫bind後，不會立即執行，而是返回乙個新的函式，呼叫新函式才會執行目標函式 自定義乙個類似於bind函式的函式，將其掛載到函式function上面，然...