Detaillierte Erläuterung der Verwendung der Vuex-Methode in React

Dieses Mal werde ich Ihnen die Methode zur Verwendung von Vuex in React ausführlich erklären. Was sind die Vorsichtsmaßnahmen für die Verwendung von Vuex in React?

Ich war schon immer ein treuer Fan von Redux, aber nachdem ich Vuex verwendet hatte, war ich beeindruckt, wie schnell ich mit Vuex angefangen habe, und so kam mir die Idee, eine Vuex-ähnliche Bibliothek zu schreiben kann in React verwendet werden und trägt vorübergehend den Namen Ruex.

So verwenden Sie

1: Erstellen Sie eine Store-Instanz:

Wie vuex, Verwenden Sie einen einzelnen Zustandsbaum (ein Objekt), der alle Zustände (Speicher) auf Anwendungsebene enthält.

Store kann Status, Mutationen, Aktionen und Modulattribute konfigurieren:

1. Status: Daten speichern

2. Mutationen: Status ändern Die einzige Möglichkeit besteht darin, eine Mutation einzureichen

3. Aktionen: Aktion übermittelt eine Mutation, anstatt den Status direkt zu ändern. Die Aktion kann jede asynchrone Operation enthalten, Mutationen auslösen und andere Aktionen auslösen.

Unterstützt Middleware: Middleware wird vor und nach dem Auslösen jeder Mutation ausgeführt.

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

Binden Sie die Store-Instanz an die Komponente

ruex stellt einen Provider bereit, um die Registrierung der Store-Instanz zu erleichtern zum globalen Kontext. Ähnlich wie 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>
 )
 }
}

Daten im Store verwenden oder ändern

Nachdem die Store-Bindung abgeschlossen ist, In der Komponente können Sie die Daten zum Zustand verwenden und den Zustand ändern, indem Sie Mutationen oder Aktionen auslösen. Spezifische Methoden finden Sie in der Bindungsmethode von React-Redux: Verwenden von Komponenten höherer Ordnung.

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=&#39;&#39;>
 <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:

1. mapStateToProps: Binden Sie die Daten zum Status an die aktuelle Komponente Requisiten.

2. mapMutationsToProps: Mutationen an Requisiten binden. Beispiel: Die Mutation kann beim Aufruf durch this.props.add(data) ausgelöst werden, und der Datenparameter wird vom Nutzlastparameter der Mutation empfangen.

3. mapActionsToProps: Aktionen an Requisiten binden.

Interne Implementierung

ruex verwendet intern immer, um Aktualisierungen des Geschäftsstatus zu verwalten, sodass es bei Mutationen geändert werden kann Direkt ändern die Eigenschaften eines Objekts den Status, ohne dass ein neues Objekt zurückgegeben wird. Zum Beispiel:

const state = {
 obj:{
 name:'aaaa'
 }
}
const mutations = {
 changeName(state,payload){
 state.obj.name = 'bbbb'
 // instead of 
 // state.obj = {name:'bbbb'}
 },
}

unterstützt Module (Namespace wird noch nicht unterstützt)

unterstützt Middleware. Hinweis: Aktionen haben ähnliche Funktionen wie redux-thunk implementiert.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Vue integrierte Anleitung

Wie FileReader einen Dateileser implementiert

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung der Vuex-Methode in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!