让vue也可以使用redux -凯发k8官方网

上周末看vuex源码，突发灵感，为什么都是vuex啊。 于是蛋疼一下午写了一个插件来帮助vue可以使用redux

gayhub url

这是一个用于帮助vue使用redux管理状态的插件。redux是一个非常流行的状态管理工具。vue-with-redux为大家提供一个可以在vue环境下使用redux的途径。这回带来不同的开发体验。

首先你需要通过如下命令安装vue-with-redux

npm install -save vue-with-redux git clone https://github.com/ryouaki/vue-with-redux.gitnpm installnpm run serve

需要像下面这样改造你的入口文件：

// 有可能是你的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的组件例子:

更多专业前端知识，请上 【猿2048】www.mk2048.com

总结

以上是凯发k8官方网为你收集整理的让vue也可以使用redux的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。