dva-vue

Lightweight front-end framework based on dva-core and history
What's dva.js?

Demos & Plugins

• dva-nprogress: dva-vue plugin
• dva-vue-example: dva-vue demos

---

Install

$ npm install --save dva-vue

Usage Example

<template>
    <div>
        <div>count: {{count}}</div>
        <div @click="add"></div>
    </div>
</template>
<script>
    import {connect} from 'dva-vue'
    export default connect(({count}) => ({count}))({
      methods: {
        add () {
          this.dispatch({type: 'count/add'})
        },
        asyncAdd () {
          this.dispatch({type: 'count/asyncAdd'}).then(()=>console.log('done'))
        }
      } 
    })
</script>

import dva, { createHashHistory } from 'dva-vue'
import App from 'App.vue'

const delay = ms => new Promise((resolve, reject) => setTimeout(() => resolve(), ms))

const app = dva({
  history: createHashHistory() // 默认值
})
app.model({
  namespace: 'count',
  state: 0,
  reducers: {
    add (state, { payload }) { return state + payload || 1 },
    minus (state, { payload }) { return state - payload || 1 }
  },
  effects: {
    * asyncAdd(_, {call, put}){
      // as some fetch action
      yield delay(1000)
      yield put({type: 'add', payload: 1})
    }
  }
})
app.router(() => [{ path: '/', component: App }])
app.start('#root')

API Reference

import dva, { 
    connect,
    dynamic
} from 'dva-vue'

LICENSE

MIT