让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 相关文章推荐
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
浅谈jQuery hover(over, out)事件函数
Dec 03 Javascript
详解用node编写自己的cli工具
May 23 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 Javascript
微信小程序排坑指南详解
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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
PHP:风雨欲来 路在何方?
2006/10/09 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
前台接待员岗位职责
2014/01/02 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python