让Vue也可以使用Redux的方法

前端之家收集整理的这篇文章主要介绍了让Vue也可以使用Redux的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

上周末看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);
}
}

Note:

你并不需要使用redux-thunk,因为Vue-with-Redux已经提供了对异步处理的支持.

这是一个reducer的例子:

export default {
reduce
};

Vue的组件例子:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章