手寫Vuex原始碼

Vuex原理解析

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

 

1.Vuex使用相關解析

main.js

import store form './store' // 引入一個store檔案
 ​
 new Vue({
     // 在Vue初始化的過程中，注入一個store屬性，內部會將這個屬性放到每個元件的$store上
     store, 
 })

 

 

store.js

import Vuex from 'Vuex'
 ​
 Vue.use(Vuex) 
 ​
 // 通過Vuex中的一個屬性 Store 建立一個store的例項
 export default new Vuex.Store({
     state: { // 單一資料來源
         age: 10
     },
     mutations: { // 
         // payload 載荷 
         syncChange(state,payload) { // 修改狀態的方法 同步更改
             state.age+= payload
         }
     },
     actions: {
         asyncChange({commit}, payload) {
             setTimeout(() => {
                 commit('syncChange',payload)
             },1000)
         }
     }
 })
 //mutations中增加非同步操作 嚴格模式下會直接報錯，普通模式下不會報錯但不合法

 

 

2.Vuex原理解析實現

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

 

1.Vuex核心概念

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

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

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

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

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

 

2.實現Vuex

store.js

先建立一個入口檔案

import Vue from 'vue'
 // import Vuex from 'vuex' 官方的Vuex外掛
 import Vuex from './vuex/index1' // 自己寫的Vuex
 ​
 Vue.use(Vuex) // 預設會執行當前外掛的install方法
 ​
 // 通過Vuex中的一個屬性 Store 建立一個store的例項
 export default new Vuex.Store({
   // 定義資料
   modules: {
     a: {
       state: {
         age: 'a100'
       },
       mutations: {
         syncChange() {
           console.log('a');
         }
       },
     },
     b: {
       state: {
         age: 'b100'
       },
       mutations: {
         syncChange() {
           console.log('b');
         }
       },
       modules: {
         c: {
           state: {
             age: 'c100'
           },
           mutations: {
             syncChange() {
               console.log('c');
             }
           },
         }
       }
     }
   },
   state: {
     age: 10
   },
   mutations: {
     syncChange(state, payload) {
       state.age += payload
     }
   },
   actions: {
     asyncChange({ commit }, payload) {
       setTimeout(() => {
         commit('syncChange', payload)
       }, 1000)
     }
   },
   getters: {
     myAge(state) {
       return state.age + 20
     }
   }
 })

 

 

index1.js

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

let vue
 const install = (_Vue) => {
     Vue = _Vue // install方法呼叫時，會將Vue作為引數傳入
     
     Vue.mixin({ // 全域性註冊一個混入，影響註冊以後的每一個建立的Vue例項。
         beforeCreate（） {
         // 判斷當前根例項上有沒有store,有的話把根元件的的store屬性 放到每個元件的例項上
         // 這樣每個元件上都能直接實現this.$store去訪問store裡面的東西
             if(this.$option.store) { 
                 this.$store = this.$options.store
             } else {
                 this.$store = this.$parent && this.$parent.$store
             }
         }
     })
 }
 ​
 ​
 class Store { // 使用者獲取的是這個store類的例項
     constructor(options) {
         // 建立Vue的例項 保證更新狀態可以重新整理檢視
         this.vm = new Vue({
             data: {
                 state: optons.state
             }
         })
     }
     
     // es6 的訪問器
     get state() {
         return this.vm.state
     }
     
     this.getters = {}
     this.mutations = {}
     this.actions = {}
     // 1、需要將使用者傳入的資料進行格式化操作
     this.moudules = new ModulesCollections(options)
 ​
     // 2、遞迴的安裝模組
     installModule(this,this.state,[], this.modules.root)
 ​
     // 呼叫
     commit = (mutationName, payload) => {
         // es7寫法 這個裡面的this 永遠指向當前的store例項
         this.mutaions[mutationName].forEach(fn =>fn(payload))
     }
     
     dispath = (actionName, payload) => {
         this.actions[actionName].forEach(fn =>fn(payload))
     }
 }
 ​
 // 定義一個forEach遍歷當前物件屬性然後執行一個回撥函式,後面要用到
 const forEach = (obj, callback) => {
     Object.keys(obj).forEach(key => {
         callback(key, obj[key])
     })
 }
 ​
 // 格式化使用者資料
 class ModuleCollection {
     constructor(options) {
         // 深度將所有的子模組都遍歷一遍
         this.register([], ooptions)
     }
     register(path, rootModule) {
         let rawModule = {
             _raw: rootModule,
             _children: {},
             state: rootModule.state
         }
         if(!this.root) {
             this.root = rawModule
         } else {
             // 找到要定義的模組，將這個模組定義他父親的_children屬性裡
             let parentModule = path.slice(0,-1).reduce((root, current) => {
                 return root._children[current]
             }, this.root)
             parentModule._childen[path[path.length - 1]] = rawModule
         }
         
         // 如果有子模組
         if(rootModule.modules) {
             forEach(rootModule.modules,(moduleName, module) => {
                 this.register(path.concat(moduleName), module)
             })
         }
     }
 }
 ​
 // 遞迴安裝模組
 function installModule(store, rootState, path, rawModeule) {
     // 如果有子模組,安裝子模組的狀態
     if(path.length > 0) {
         let parentState = path.slice(0,-1).reduce((root, current) => {
             return root[current]
         }, rootState)
          Vue.set(parentState, path[path.length -1],rawModule.state)
     }
     
     let getters = rawModule._raw.getters // 取使用者的getter
     if(getters) {
         forEach(getters, (getterName, value) => {
             Object.defineProperty(store.getters, getterName, {
                 get: () => {
                     return value(rawModule.state)
                 }
             })
         })
     }
     
     let mutations = rawModule.raw.mutations // 取使用者的mutation
     if(mutations) {
         forEach(mutations, (mutationName, value) => {
        let arr = store.mutations[mutationName] || (store.mutaons[mutationName] = [])
         })
         arr.push((plyload) => {
             value(rawModule.state, payload)
         })
     }
     
     let actions = rawModule._raw.actions // 取使用者的action
     if(actions) {
         forEach(actions, (actionName, value) => {
             let arr = store.actions[actionName] || (store.actions[actionName] = [])
             arr.push((payload) => {
                 value(store, payload)
             })
         })
     }
     
     // 遞迴
     forEach(rawModule._childen, (moduleName, rawModule) => {
         installModule(store, rootState, path.concat(moduleName),rawModule)
     })
 }

 

 

3.實現步驟總結：

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方法的詳細操作。