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