让Vue也可以使用Redux的方法


Posted in Javascript onMay 23, 2018

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取父节点方法
Aug 20 Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
jquery css实现流程进度条
Mar 26 jQuery
vue实现简单数据双向绑定
Apr 28 Vue.js
微信小程序排坑指南详解
May 23 #Javascript
关于vue-router的那些事儿
May 23 #Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 #Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 #Javascript
JavaScript+H5实现微信摇一摇功能
May 23 #Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 #Javascript
vue动态路由配置及路由传参的方式
May 23 #Javascript
You might like
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
javascript css styleFloat和cssFloat
2010/03/15 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
javaScript之split与join的区别(详解)
2017/11/08 Javascript
浅谈React高阶组件
2018/03/28 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
vue-cli3.X快速创建项目的方法步骤
2019/11/14 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
Python使用googletrans报错的解决方法
2018/09/25 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
印度低票价航空公司:GoAir
2017/10/11 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
库房主管岗位职责
2013/12/31 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
高一学生期末评语
2014/04/25 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
毕业实习单位意见
2015/06/04 职场文书
开业典礼致辞
2015/07/29 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
HTML中的表单元素介绍
2022/02/28 HTML / CSS
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers