让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 相关文章推荐
ie8本地图片上传预览示例代码
Jan 12 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
Dec 10 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
Jquery 效果使用详解
Nov 23 Javascript
jQuery处理XML文件的几种方法
Jun 14 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
php发送与接收流文件的方法
2015/02/11 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
JavaScript Sort 表格排序
2009/10/31 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
javascript实现滚动效果的数字时钟实例
2016/07/21 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
javascript表单正则应用
2017/02/04 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
新闻学专业个人求职信写作
2014/02/04 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
公司党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
护士节慰问信
2015/02/15 职场文书
销售督导岗位职责
2015/04/10 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android