So rufen Sie vuex auf, um Schnittstellendaten in vue.js zu speichern

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zum Einführen von Vuex-Speicherschnittstellendaten und zum Aufrufen von vue.js vor Folgen Sie bitte dem Herausgeber, um gemeinsam zu lernen.

Vorwort

Vor ein paar Tagen habe ich auf MOOC.com das stark nachgeahmte Ele.me-App-Video-Tutorial von Lehrer Huang Yi gesehen und Ich habe an der Schnittstelle gearbeitet und überlegt, ob diese Schnittstelle global gespeichert und aufgerufen werden kann. Anstatt die Benutzeroberfläche mehrmals zu durchlaufen, ist die Verwaltung auch mühsam.

Der universelle Vue hat diese Funktion, nämlich Vuex.

Vuex ist eine Flux-ähnliche Datenverwaltungsarchitektur, die hauptsächlich in mittleren und großen Einzelseitenanwendungen verwendet wird. Es hilft uns vor allem dabei, den Code besser zu organisieren und den Zustand innerhalb der Anwendung in einem wartbaren und verständlichen Zustand zu halten.

Wenn Sie nicht ganz verstehen, was der Status in der Vue.js-Anwendung bedeutet, können Sie sich das Datenfeld in der Vue-Komponente vorstellen, die Sie zuvor geschrieben haben. Vuex unterteilt den Zustand in den internen Zustand der Komponente und den Zustand auf Anwendungsebene:

• Interner Zustand der Komponente: Zustand, der nur innerhalb einer Komponente (Datenfeld) verwendet wird

• Status auf Anwendungsebene: Status, der von mehreren Komponenten geteilt wird

Zum Beispiel: Es gibt beispielsweise eine übergeordnete Komponente, die zwei untergeordnete Komponenten hat. Diese übergeordnete Komponente kann mithilfe von Requisiten Daten an die untergeordnete Komponente übergeben. Dieser Datenkanal ist leicht zu verstehen.

Der spezifische Implementierungsprozess besteht natürlich darin, zuerst

npm install vuex --save（推荐使用淘宝镜像cnpm，具体实施请自行百度）

zu installieren und dann eine store.js-Datei zu erstellen, um die Daten zu verwalten

Der Inhalt darin ist wie folgt

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
 state:{
 },
 actions:{
 },
 mutations:{
 }
})

Dann führen Sie diese js-Datei in main.js ein

import store from './store.js'

Dann beginnen Sie mit der Anforderung von Daten, in Mutationen Schreiben Sie

mutations:{
  getJson(){
   Vue.http.get('../data.json',{
    },{
    headers:{},
    emulateJSON:true
    }).then(response=>{
    this.state.newslist=response.data;
    },response=>{
     
    })
  }
 }

in diesem Attribut, damit die Aktionen aufgerufen und die Daten im Status gespeichert werden können. Auf der offiziellen Website heißt es, dass es sich hierbei um eine asynchrone Speicherung von Daten handelt Das bedeutet natürlich, dass es sich bei der Synchronisation um Mutationen handelt. Die asynchronen Daten werden jedoch zuerst in Mutationen geschrieben und können dann aufgerufen werden. Sie müssen sie also in Aktionen wie folgt schreiben:

actions:{
  newJson(obj){
   obj.commit('getJson');
  }
 },

und dann den Status wie folgt schreiben:

state:{
  newslist:[]
 },

Der Zweck von Das Schreiben dient dazu, Fehler zu vermeiden, z. B. nicht gefunden zu werden.

Das obige newJson und obj werden von mir individuell angepasst. getJson ist die Methode, die Sie in Mutationen verwenden möchten. Diese getJson-Methode kann auch später verwendet werden , aber die Parameter müssen sein. Es handelt sich um den oben genannten Zustand, nicht angepasst. Schreiben Sie zu Tode.

Dann können Sie den Fluss in Ihre Unterkomponente aufteilen!

Der Code in der Unterkomponente lautet wie folgt:

import {mapState} from 'vuex';
computed:{
 ...mapState({
  goods:state=>state.newslist.goods,
  classMap:state=>state.classMap
 })
 }

Hier habe ich eine Ware angepasst, um state.newslist.goods zu ersetzen, weil meine Daten

{
"goods":[]
}

Ich fand dieses Format zu lang und habe es daher gekürzt.

Dann können Sie es direkt in HTML aufrufen

rrree

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

So verhindern Sie wiederholtes Rendern mit React

So implementieren Sie die Direktivenfunktion in Vue

So implementieren Sie die Kapselung basierend auf dem MSSQL-Modul in NodeJS

So implementieren Sie Bind in Javascript

So implementieren Sie es in js Sekundärverknüpfung

Das obige ist der detaillierte Inhalt vonSo rufen Sie vuex auf, um Schnittstellendaten in vue.js zu speichern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!