Lassen Sie uns über mein Verständnis von Vuex sprechen

Vuex existiert, um das Problem der Kommunikation zwischen Vue-Komponenten zu lösen. Vuex ist etwas kompliziert zu verstehen, aber sobald Sie es verstanden haben, ist es einfach zu verwenden:

Installation:

npm install --save vuex

Einführung

import Vuex

Einführung in mehrere Parameter von Vuex

State Store-Initialisierungsdaten

Getter für State Sekundärverarbeitung von Daten (das Filtern der Daten ähnelt einem Filter). Wenn wir beispielsweise den Wert eines Schlüssels im Objekt erhalten möchten, verwenden Sie diese Methode

Mutationen Methoden zum Berechnen von Daten werden in Inside geschrieben (ähnlich wie berechnet). Verwenden Sie this.$store.commit('mutationName') beim Auslösen auf der Seite, um die Mutations-Methode auszulösen, um den Wert des Status zu ändern

Aktionen zu Verarbeiten Sie die bereits in Mutations geschriebenen Methoden. $store.dispatch(actionName) >

Lesen Sie den obigen Inhalt immer wieder. Lassen Sie uns Beispiele nennen und sie in der offiziellen Sprache beschreiben.

Staat

console.log(Vuex) //Vuex为一个对象里面包含Vuex ={
    Store:function Store(){},    
    mapActions:function(){},    // 对应Actions的结果集mapGetters:function(){},    //对应Getters的结果集mapMutations:function(){},  //对应Mutations的结果集mapState:function(){},      //对应State的结果集install:function install(){}, //暂时不做讲解 installed:true //暂时不做讲解}//如果我们只需要里面的State时我们可以这样写import { mapState } from 'vuex';
import { mapGetters, mapMutations } from 'vuex'; //如果需要引用多个时用这种方式处理

Staat ist für die Speicherung der Statusdaten verantwortlich Im Allgemeinen muss das Store-Objekt bei der Verwendung in den Knoten eingefügt werden. Sie können this.$store.state verwenden, um den Status direkt abzurufen

Dieser Speicher kann als Container verstanden werden, einschließlich des Status in der Anwendung. Der Prozess der Instanziierung und Generierung eines Stores ist wie folgt:

//store为实例化生成的import store from './store' new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

Wenn Sie bei der späteren Verwendung in Komponenten den entsprechenden Status erhalten möchten, können Sie this.$store.state direkt verwenden Natürlich können Sie auch die von vuex bereitgestellte MapState-Hilfsfunktion verwenden, um den Status berechneten Eigenschaften zuzuordnen, z. B.

//./store文件const store = new Vuex.Store({
  state: {   //放置state的值
    count: 0,
    strLength:"abcd234"
  },
  getters: {   //放置getters方法
      strLength: state => state.aString.length
  },
  mutations: {   //放置mutations方法
       mutationName(state) {          //在这里改变state中的数据  state.count = 100;
       }
  },  // 异步的数据操作  actions: {      //放置actions方法
       actionName({ commit }) {          //dosomething commit('mutationName')
      },
      getSong ({commit}, id) {
          api.getMusicUrlResource(id).then(res => {
            let url = res.data.data[0].url;
        
          })
          .catch((error) => {  // 错误处理              console.log(error);
          });
      }
  }
});
export default store;

Getter

Einige Staaten benötigen muss zweimal durchgeführt werden. Nach der Verarbeitung können Sie Getter verwenden. Greifen Sie über this.$store.getters.valueName auf den abgeleiteten Status zu. Oder verwenden Sie direkt die Hilfsfunktion mapGetters, um sie lokal berechneten Eigenschaften zuzuordnen.

import {mapState} from 'vuex'export default {  //组件中
  computed: mapState({
    count: state => state.count
  })
}

So verwenden Sie es in Komponenten

Mutationen

Mutationen bedeuten auf Chinesisch „Veränderung“. Sie können es verwenden, um den Zustand zu ändern Das Wesentliche ist eine Funktion zur Verarbeitung von Daten, die den eindeutigen Parameterwertstatus empfängt. store.commit(mutationName) ist eine Methode zum Auslösen einer Mutation. Es muss beachtet werden, dass die definierte Mutation eine synchrone Funktion sein muss, andernfalls kann es zu Problemen mit den Daten im Devtool kommen, wodurch Zustandsänderungen schwer nachzuverfolgen sind.

import {mapGetters} from 'vuex'export default {  
computed: mapGetters(['strLength'])
}

Trigger in der Komponente:

Oder verwenden Sie die Hilfsfunktion mapMutations, um die Triggerfunktion direkt Methoden zuzuordnen, sodass Sie das Elementereignis direkt binden können gebraucht. Zum Beispiel:

export default {
  methods: {
    handleClick() {      this.$store.commit('mutationName')
    }
  }
}

Aktionen

Aktionen können auch verwendet werden, um den Zustand zu ändern, aber sie werden durch das Auslösen von Mutationen umgesetzt. Wichtig ist, dass dies möglich ist umfassen asynchrone Vorgänge. Seine Hilfsfunktion ist MapActions, die MapMutations ähnelt und ebenfalls an die Methoden der Komponente gebunden ist. Wenn Sie es direkt auslösen möchten, verwenden Sie diese.$store.dispatch(actionName)-Methode.

import {mapMutations} from 'vuex'export default {
  methods: mapMutations(['mutationName'
  ])
}

Verwenden Sie

Plugins

in der Komponente. Das Plug-in ist eine Hook-Funktion, die beim Initialisieren des Stores eingeführt werden kann. Das am häufigsten verwendete ist das integrierte Logger-Plug-in, das zum Debuggen verwendet wird.

import {mapActions} from 'vuex'//我是一个组件export default {
  methods: mapActions(['actionName',
  ])
}

Das obige ist der detaillierte Inhalt vonLassen Sie uns über mein Verständnis von Vuex sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!