让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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
javascript qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
Jul 31 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 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
第八节--访问方式
2006/11/16 PHP
完美解决PHP中文乱码
2009/11/26 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
使用php批量删除数据库下所有前缀为prefix_的表
2014/06/09 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
python检索特定内容的文本文件实例
2018/06/05 Python
python绘制直线的方法
2018/06/30 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
自动化专业职业生涯规划书范文
2014/01/16 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
支教自我鉴定
2014/01/18 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
班级年度安全计划书
2014/05/01 职场文书
低碳环保口号
2014/06/12 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
农业项目合作意向书
2015/05/08 职场文书
Mysql Show Profile
2021/04/05 MySQL