详解几十行代码实现一个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..等

源码地址:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。