详解在React里使用"Vuex"

一直是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的功能

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。