让Vue也可以使用Redux的方法

让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 https://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);

leaUeout 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的组件例子:

Action Object

Sync Action

Async Action

{{reduce.count}}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。