详解在React里使用"Vuex"


Posted in Javascript onApril 02, 2018

一直是Redux的死忠党,但使用过Vuex后,感叹于Vuex上手之快,于是萌生了写一个能在React里使用的类Vuex库,暂时取名 Ruex 。

如何使用

一:创建Store实例:

与vuex一样,使用单一状态树(一个对象)包含全部的应用层级状态(store)。

store可配置state,mutations,actions和modules属性:

  1. state :存放数据
  2. mutations :更改state的唯一方法是提交 mutation
  3. actions :Action 提交的是 mutation,而不是直接变更状态。Action 可以包含任意异步操作,触发mutation,触发其他actions。

支持中间件:中间件会在每次mutation触发前后执行。

store.js:

import {createStore} from 'ruex'
const state = {
 total_num:1111,
}
const mutations = {
 add(state,payload){
 state.total_num += payload
 },
 double(state,payload){
 state.total_num = state.total_num*payload
 },
}
const actions = {
 addAsync({state,commit,rootState,dispatch},payload){
 setTimeout(()=>{
 commit('add',payload)
 },1000)
 },
 addPromise({state,commit,rootState,dispatch},payload){
 return fetch('https://api.github.com/search/users?q=haha').then(res=>res.json())
 .then(res=>{
 commit('add',1)
 dispatch('addAsync',1)
 })
 },
 doubleAsync({state,commit,rootState,dispatch},payload){
 setTimeout(()=>{
 commit('double',2)
 },1000)
 },
 doublePromise({state,commit,rootState,dispatch},payload){
 return fetch('https://api.github.com/search/users?q=haha').then(res=>res.json())
 .then(res=>{
 commit('double',2)
 dispatch('doubleAsync',2)
 })
 },
}
// middleware
const logger = (store) => (next) => (mutation,payload) =>{
 console.group('before emit mutation ',store.getState())
 let result = next(mutation,payload)
 console.log('after emit mutation', store.getState())
 console.groupEnd()
}
// create store instance
const store = createStore({
 state,
 mutations,
 actions,
},[logger])
export default store

将Store实例绑定到组件上

ruex提供Provider方便store实例注册到全局context上。类似react-redux的方式。

App.js:

import React from 'react'
import {Provider} from 'ruex'
import store from './store.js'
class App extends React.Component{
 render(){
 return (
  <Provider store={store} >
  <Child1/>
  </Provider>
 )
 }
}

使用或修改store上数据

store绑定完成后,在组件中就可以使用state上的数据,并且可以通过触发mutation或action修改state。具体的方式参考react-redux的绑定方式:使用connect高阶组件。

Child1.js:

import React, {PureComponent} from 'react'
import {connect} from 'ruex'
class Chlid1 extends PureComponent {
 state = {}
 constructor(props) {
 super(props);
 }

 render() {
 const {
 total_num,
 } = this.props
 return (
 <div className=''>
 <div className="">
 total_num: {total_num}
 </div>

 <button onClick={this.props.add.bind(this,1)}>mutation:add</button>
 <button onClick={this.props.addAsync.bind(this,1)}>action:addAsync</button>
 <button onClick={this.props.addPromise.bind(this,1)}>action:addPromise</button>
 <br />
 <button onClick={this.props.double.bind(this,2)}>mutation:double</button>
 <button onClick={this.props.doubleAsync.bind(this,2)}>action:doubleAsync</button>
 <button onClick={this.props.doublePromise.bind(this,2)}>action:doublePromise</button>
 </div>)
 }
}


const mapStateToProps = (state) => ({
 total_num:state.total_num,
})
const mapMutationsToProps = ['add','double']
const mapActionsToProps = ['addAsync','addPromise','doubleAsync','doublePromise']

export default connect(
 mapStateToProps,
 mapMutationsToProps,
 mapActionsToProps,
)(Chlid1)

API:

  1. mapStateToProps :将state上的数据绑定到当前组件的props上。
  2. mapMutationsToProps : 将mutation绑定到props上。例如:调用时通过this.props.add(data)的方式即可触发mutation,data参数会被mutaion的payload参数接收。
  3. mapActionsToProps : 将action绑定到props上。

内部实现

ruex内部使用immer维护store状态更新,因此在mutation中,可以通过直接修改对象的属性更改状态,而不需要返回一个新的对象。例如:

const state = {
 obj:{
 name:'aaaa'
 }
}
const mutations = {
 changeName(state,payload){
 state.obj.name = 'bbbb'
 // instead of 
 // state.obj = {name:'bbbb'}
 },
}

支持modules(暂不支持namespace)

支持中间件。注:actions已实现类似redux-thunk的功能

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

Javascript 相关文章推荐
jQuery的链式调用浅析
Dec 03 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
vue-loader教程介绍
Jun 14 Javascript
Rollup处理并打包JS文件项目实例代码
May 31 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 #Javascript
Vue项目分环境打包的实现步骤
Apr 02 #Javascript
详解webpack-dev-server的简单使用
Apr 02 #Javascript
webpack v4 从dev到prd的方法
Apr 02 #Javascript
vue axios登录请求拦截器
Apr 02 #Javascript
webpack+react+antd脚手架优化的方法
Apr 02 #Javascript
vue axios请求超时的正确处理方法
Apr 02 #Javascript
You might like
php 代码优化之经典示例
2011/03/24 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
浅谈Webpack核心模块tapable解析
2018/09/11 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
js实现随机点名程序
2020/09/17 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
Python生成器以及应用实例解析
2018/02/08 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
django创建超级用户过程解析
2019/09/18 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
群胜软件Java笔试题
2012/09/29 面试题
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
快递员岗位职责
2014/09/12 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
竞聘书的秘诀
2019/04/02 职场文书
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js