詳解幾十行代碼實現一個vue的狀態管理

這篇文章主要介紹了詳解幾十行代碼實現一個vue的狀態管理，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

介紹

採用集中式存儲管理應用的所有組件的狀態, 就能實現組件間數據共享

實現

邏輯圖

從圖上有兩條線: Vue.use(vuec), 與 new Vuec.center(options)

第一條線Vue.use(vuec)安裝插件

使用Vue.use(vuec)時, 會執行vuec的install方法,會注入參數Vue 所以vuec是這樣的,

// index.js
import {Center, install} from './center'
export default {Center, install}

Center對象將實例化成center(下面再說),我們先看看install方法

// center.js
let Vue // 全局變量, 保存install裏的Vue
export function install (_Vue) {
 if (!Vue) {
  _Vue.mixin({
   beforeCreate: applyMixin // 在beforeCreate鉤子上混入applyMixin函數
  })
 }
 Vue = _Vue
}

install在Vue原型的beforeCreate混入applyMixin函數, 也就是說在生成每個Vue組件時,在它的生命週期beforeCreate鉤子上就會執行applyMixin方法

第二條線 new Vuec.center(options)實例化Center對象

先看看用戶傳入的options, 下面例子

export default new Vuec.Center({
 state: {
  name: 'liuyang'
 },
 mutations: {
  changeName (state) {
   state.name = 'jike'
  }
 }
})

上面代碼會生成center實例, 該實例上應該包括:state狀態,commit方法提交變更等

// center.js
export class Center {
 constructor (options= {}) {
  let center = this
  this.mutations = options.mutations
  observeState(center, options.state)
 }
 get state () { // 代理了this.$center.state的最終訪問值
  return this._vm.$data.$$state
 }
 commit (_type, _payload) {
  this.mutations[_type](this.state, _payload)
 }
}
function observeState(center, state) { // 響應式state
 center._vm = new Vue({
  data: {
   $$state: state
  }
 })
}

在執行new Vuec.Center({..})時,就是執行Center的構造函數

首先執行let center = this, 定義center保存當前實例

接着執行this.mutations = options.mutations, 在實例center上添加mutations屬性, 值就是用戶輸入mutations,

按上面例子, this.mutations長成這樣

this.mutations = {
  changeName (state) {
   state.name = 'jike'
  }
}

最後執行observeState(center, options.state), 作用:讓center實例的state屬性指向options.state並且是響應式的

  function observeState(center, state) { // 響應式state
   center._vm = new Vue({ // 利用Vue的響應系統,將state轉化成響應式
    data: {
     $$state: state
    }
   })
  }

在center實例上添加_vm屬性, 值是一個Vue實例, 在該Vue實例的data下定義了$$state, 它的值是options.state用戶輸入的state; 結合上面的這段代碼

// center.js
export class Center {
 ...省略
 get state () { // 代理了this.$center.state的最終訪問值
  return this._vm.$data.$$state
 }
 ...省略
}

所以我們在組件中訪問center.state其實就是訪問center._vm.$data.$$state

OK, center就構建好了

創建Vue組件

用戶輸入

import Vue from 'vue'
import App from './App'
import router from './router'
import center from './center'

new Vue({
 el: '#app',
 router,
 center, // 構建好的center實例
 template: '<App/>',
 components: {App}
})

在beforeCreate生命週期時會觸發上面混入的applyMixin函數

// mixins.js
export default function applyMixin() {
 vuecInit.call(this) // 
}

function vuecInit () {
 const options = this.$options
 // vue的實例化是從外往內, 所以父組件的$center一定是options的center
 this.$center = options.parent?options.parent.$center: options.center
}

applyMixin裏會執行vuecInit.call(this), 這裏的this指向當前組件的實例,

接着看vuecInit, 定義了options等於用戶輸入選項,因爲先創建根組件, 所以根組件this.$center的值的引用就是我們在new Vue({..center})時傳入的center實例, 下面所有組件都指向它

OK, 你就可以在組件裏使用this.$center訪問了

commit變更

// center.js
export class Center {
 ... 省略
 commit (_type, _payload) {
  this.mutations[_type](this.state, _payload)
 }
}

通常我們變更時: this.$center.commit('changeName', 'jike'), 這樣的話, this.mutations[_type]就是對應方法函數, 往該函數裏傳入state以及payload,

舉上面的例子

// this.mutations[_type] , _type = 'changeName', payload= 'jike'
this.mutations = {
  changeName (state, payload) {
   state.name = payload
  }
}

說明

上面只是一個簡單的狀態管理, 還有很多地方沒有實現: actions異步變更,getters函數,modules模塊分割, 輔助函數mapState..等

源碼地址: github

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。