这次给大家带来react中使用vuex方法详解，react中使用vuex的注意事项有哪些，下面就是实战案例，一起来看一下。
一直是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 (
<p classname=''>
<p classname="">
total_num: {total_num}
</p>
<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>
</p>)
}
}
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的功能
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue内置指令使用说明
filereader如何实现文件阅读器
以上就是react中使用vuex方法详解的详细内容。