dvajs
dvajs来源于支付宝前端的实践，基于redux、redux-saga和react-router 的轻量级前端框架
如何在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)
