這次帶給大家React裡的Vuex使用案列，React裡Vuex使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
一直是Redux的死忠黨，但使用過Vuex後，感嘆於Vuex上手之快，於是萌生了寫一個能在React裡使用的類Vuex函式庫，暫時取名為 Ruex 。
如何使用
一：建立Store實例:
與vuex一樣，使用單一狀態樹(一個物件)包含全部的應用層級狀態(store)。
store可設定state,mutations,actions和modules屬性：
state :存放資料
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)資料綁定到目前元件的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'}
},
}以上是React裡的Vuex使用案例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
