dvajs

dvajs來源于支付寶前端的實踐，基于redux、redux-saga和react-router 的輕量級前端框架

• dva：基于 react 和 react-router
• dva-core：僅封裝了 redux 和 redux-saga

如何在vue中使用

• 注入dispatch、state 到vue組件
• 訂閱state改變的時候通知vue組件

實現(xiàn)方式

由于不能自定義組件的方法，組件編譯后只會保留生命周期和默認(rèn)的幾個屬性（data、methods、...），所以參考vuex、vuex-router的注入方式，修改組件的beforeCreate達(dá)到注入

// 添加beforeCreate
beforeCreate = （）=> { 
  const store = this.$root.$options.store
  // 添加 dispatch
  this.dispatch = store.dispatch
  // 添加 state 達(dá)到重新賦予值會重新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)

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