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-vueUsage 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