让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 相关文章推荐
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
Vue的props父传子的示例代码
May 20 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 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
mysql limit查询优化分析
2008/11/12 PHP
php实现telnet功能示例
2014/04/08 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
php查询ip所在地的方法
2014/12/05 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
django项目搭建与Session使用详解
2018/10/10 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
青年创业培训欢迎词
2014/01/08 职场文书
我的祖国演讲稿
2014/05/04 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
2014收银员工作总结范文
2014/12/16 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android