详解在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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
Mar 24 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 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
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
用python制作个音乐下载器
2021/01/30 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
《守株待兔》教学反思
2014/03/01 职场文书
行政专员求职信范文
2014/05/03 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
长城导游词400字
2015/01/30 职场文书
小学生读书笔记范文
2015/06/30 职场文书
董事长年会致辞
2015/07/29 职场文书
军训决心书范文
2015/09/22 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript