dvajs-core在vue的实践

dvajs

dvajs来源于支付宝前端的实践，基于redux、redux-saga和react-router 的轻量级前端框架

• dva：基于 react 和 react-router
• dva-core：仅封装了 redux 和 redux-saga

如何在vue中使用

• 注入dispatch、state 到vue组件
• 订阅state改变的时候通知vue组件

实现方式

由于不能自定义组件的方法，组件编译后只会保留生命周期和默认的几个属性（data、methods、...），所以参考vuex、vuex-router的注入方式，修改组件的beforeCreate达到注入

// 添加beforeCreate
beforeCreate = （）=> { 
  const store = this.$root.$options.store
  // 添加 dispatch
  this.dispatch = store.dispatch
  // 添加 state 达到重新赋予值会重新render
  this.$root.constructor.util.defineReactive(this,属性名字,值)
  // 订阅 
  store.subscribe(() => {
      ...
      重新赋予值
  })
}

修改组件的生命周期

• 组件编译前

可以直接修改component的beforeCreate的方法，如果beforeCreate方法是对象可以变成数组，然后再追加

const pushBeforeCreate = (beforeCreate, item) => Array.isArray(beforeCreate)
  ? beforeCreate.concat(item)
  : isFunction(beforeCreate)
    ? [beforeCreate, item]
    : item
 component.beforeCreate = pushBeforeCreate(component.beforeCreate, beforeCreate)

• 组件编译后

修改component的beforeCreate的方法是无效的，需要修改实例化的对象

let _Ctor = component._Ctor[`${Object.keys(component._Ctor)[0]}`]
_Ctor.options.beforeCreate = 
      pushBeforeCreate(_Ctor.options.beforeCreate, beforeCreate)

项目地址：https://github.com/Jetsly/dva-vue