让Vue也可以使用Redux的方法

2019-11-19 13:47:30

字体：大中小

来源：转载

供稿：网友

上周末看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); 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的组件例子:

 <template> <div>  <button @click="clickHandler1">Action Object</button>  <button @click="clickHandler2">Sync Action</button>  <button @click="clickHandler3">Async Action</button>  <p>{{reduce.count}}</p> </div> </template> <script> import { test, asyncTest } from './../actions'; export default { name: 'HelloWorld', props: {  msg: String }, // 你必须在这里预先定义你订阅的Redux中的状态。否则编译模版会报错。 data() {  return {  reduce: {}  } }, methods: {  clickHandler1() {  this.dispatch({type: 'TEST'});  },  clickHandler2() {  this.dispatch(test());  },  clickHandler3() {  this.dispatch(asyncTest());  },  // 你必须实现一个mapReduxState函数，用于告诉Vue-with-Redux你需要订阅哪些redux中的状态  // [ state ] 参数就是redux状态树的根。  mapReduxState(state) {   return {   reduce: state.reduce  }  }, } } </script>

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

上一篇：jQuery实现form表单序列化转换为json对象功能示例

下一篇：微信小程序排坑指南详解