在React裡使用Vuex的具體步驟

這次帶給大家在React裡使用Vuex的具體步驟，在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>
  <child1></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>
 </p><p>
 total_num: {total_num}
 </p>
 <button>mutation:add</button>
 <button>action:addAsync</button>
 <button>action:addPromise</button>
 <br>
 <button>mutation:double</button>
 <button>action:doubleAsync</button>
 <button>action:doublePromise</button>
 )
 }
}
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的功能

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue中的slots/scoped slots應該如何使用

vue元件中slot插口的使用詳解

以上是在React裡使用Vuex的具體步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！