【下载文档:  让Vue也可以使用Redux的方法.txt 】

---

让Vue也可以使用Redux的方法
上周末看Vuex源码，突发灵感，为什么都是Vuex啊。
于是蛋疼一下午写了一个插件来帮助Vue可以使用Redux
Gayhub Url
Vue-with-Redux
这是一个用于帮助Vue使用Redux管理状态的插件。Redux是一个非常流行的状态管理工具。vue-with-redux为大家提供一个可以在Vue环境下使用Redux的途径。这回带来不同的开发体验。
开始
首先你需要通过如下命令安装vue-with-redux
npm install -save vue-with-redux
运行Demo
git clone http://github.com/ryouaki/vue-with-redux.git
npm install
npm run serve
Usage
需要像下面这样改造你的入口文件：
// 有可能是你的entry.js文件
... // 这里是你引入的其它包
import VuexRedux from 'vue-with-redux';
import { makeReduxStore } from 'vue-with-redux';
import reduces from 'YOUR-REDUCERS';
import middlewares from 'REDUX-MIDDLEWARES';
Vue.use(VuexRedux);
let store = makeReduxStore(reduces, [middlewares]);
new Vue({
store,
render: h => h(App)
}).$mount('#app')
下面是一个actionCreate函数:
export function test() {
return {
type: 'TEST'
}
}
export function asyncTest() {
return (dispatch, getState) => {
setTimeout( () => {
console.log('New:', getState());
dispatch({type: 'TEST'});
console.log('Old', getState());
}, 100);
}
}
Note: 你并不需要使用redux-thunk，因为Vue-with-Redux已经提供了对异步处理的支持.
这是一个reducer的例子:
function reduce (state = { count: 0 }, action) {
switch(action.type) {
case 'TEST':
state.count++;
return state;
default:
return state;
}
}
export default {
reduce
};
Vue的组件例子:


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。