未加星标

详解在React里使用"Vuex"

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

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

如何使用

一:创建Store实例:

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

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

state :存放数据
mutations :更改state的唯一方法是提交 mutation
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:

mapStateToProps :将state上的数据绑定到当前组件的props上。
mapMutationsToProps : 将mutation绑定到props上。例如:调用时通过this.props.add(data)的方式即可触发mutation,data参数会被mutaion的payload参数接收。
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)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: React中间件数据
tags: gt,state,lt,store,mutation,props,payload,button,const,total,num,commit,add,double
分页:12
转载请注明
本文标题:详解在React里使用"Vuex"
本站链接:http://www.codesec.net/view/574910.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(35)