上周末看Vuex源码,突发灵感,为什么都是Vuex啊。
于是蛋疼一下午写了一个插件来帮助Vue可以使用Redux
nofollow" target="_blank" href="https://github.com/ryouaki/vue-with-redux">Gayhub Url
Vue-with-Redux
这是一个用于帮助Vue使用Redux管理状态的插件。Redux是一个非常流行的状态管理工具。vue-with-redux为大家提供一个可以在Vue环境下使用Redux的途径。这回带来不同的开发体验。
开始
首先你需要通过如下命令安装vue-with-redux
运行Demo
Usage
需要像下面这样改造你的入口文件:
Vue.use(VuexRedux);
let store = makeReduxStore(reduces,[middlewares]);
new Vue({
store,render: h => h(App)
}).$mount('#app')
下面是一个actionCreate函数:
export function asyncTest() {
return (dispatch,getState) => {
setTimeout( () => {
console.log('New:',getState());
dispatch({type: 'TEST'});
console.log('Old',getState());
},100);
}
}
return (dispatch,getState) => {
setTimeout( () => {
console.log('New:',getState());
dispatch({type: 'TEST'});
console.log('Old',getState());
},100);
}
}
Note:
你并不需要使用redux-thunk,因为Vue-with-Redux已经提供了对异步处理的支持.这是一个reducer的例子:
export default {
reduce
};
reduce
};
Vue的组件例子: