dvajs
dvajs來源于支付寶前端的實踐饼问，基于redux、redux-saga和react-router 的輕量級前端框架
如何在vue中使用
- 注入dispatch、state 到vue組件
- 訂閱state改變的時候通知vue組件
實現(xiàn)方式
由于不能自定義組件的方法，組件編譯后只會保留生命周期和默認的幾個屬性（
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方法是對象可以變成數(shù)組邦鲫，然后再追加
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)
