Was sind die Eimer der Vue-Familie?

Empfohlene Tutorials: VUE.JS-Tutorial

Vue hat die berühmte Family-Bucket-Serie , einschließlich vue-router, vuex, vue-resource. In Verbindung mit dem Build-Tool vue-cli und dem sass-Stil ist es die Kernkomponente eines vollständigen Vue-Projekts.

Um es zusammenzufassen:

1. Projektkonstruktionstool

2. Routing

　3. Statusverwaltung

　4. http-Anfragetool.

Das Folgende ist eine separate Einführung zu

Vorwort: Vues zwei Kernideen: Komponentisierung und datengesteuert. Komponentisierung: Teilen Sie das Ganze in wiederverwendbare Einzelpersonen auf, datengesteuert: Beeinflussen Sie die Stücklistenanzeige direkt durch Datenänderungen und vermeiden Sie DOM-Operationen.

1. Vue-cli ist das Gerüst, um diese einseitige Anwendung schnell zu erstellen,

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ 
cd my-project
$ npm install
$ npm run dev

2. vue- router

Installation: npm installvue-router

Wenn Sie es in einem modularen Projekt verwenden, müssen Sie die Routing-Funktion explizit über Vue.use() installieren:

import Vue from'vue'
import VueRouter from'vue-router'
Vue.use(VueRouter)

Beachten Sie außerdem, dass Sie während der Verwendung das Übergangsattribut von Vue verwenden können, um den Effekt des Seitenwechsels darzustellen.

3. vuex

Das von vuex speziell für vue.js-Anwendungen entwickelte Zustandsmanagement kann als globales Datenmanagement verstanden werden. Vuex besteht hauptsächlich aus fünf Teilen: Zustandsaktion, Mutation, Getter und Mudle.

Der Verwendungsprozess ist: Die oben genannten vier Teile können direkt in der Komponente aufgerufen werden, mit Ausnahme von Mudle,

1, Zustand

Ähnlich wie bei den Daten Verwenden Sie das Vue-Objekt, um Daten und Status zu speichern. Die gespeicherten Daten reagieren. Wenn sich die Daten ändern, ändern sich auch die Komponenten, die auf die Daten angewiesen sind.

Beispiele für zwei Möglichkeiten, den Status abzurufen:

1.store.getters['getRateUserInfo']

2. ...mapGetters({

UserInfo: 'login/UserInfo', // Benutzerinformationen

menuList: 'getMenuList', // Frachtratengenehmigung genehmigen

RateUserInfo: 'getRateUserInfo' // Benutzerinformationen bewerten

})

Hinweis: Globaler Zustand und Getter können über „mapState“ den berechneten Eigenschaften der aktuellen Komponente zugeordnet werden.

2. Aktionen

Aktion wird durch die Methode store.dispatch ausgelöst: Aktion unterstützt asynchrone Aufrufe (API kann aufgerufen werden), Mutationen unterstützen nur die Operationssynchronisation und die Bei der eingereichten Aktion handelt es sich eher um eine Mutation als um eine direkte Zustandsänderung.

Zum Beispiel:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Die Action-Funktion akzeptiert ein Kontextobjekt mit denselben Methoden und Eigenschaften wie die Store-Instanz, sodass Sie context.commit aufrufen können, um eine Mutation zu übermitteln oder Kontext zu übergeben. Zustand und Kontext-Getter, um Zustand und Getter zu erhalten.

In der Praxis verwenden wir häufig die ES2015-Parameterdestrukturierung, um den Code zu vereinfachen (insbesondere, wenn wir Commit mehrmals aufrufen müssen):

3 🎜>Jede Mutation hat einen String-Ereignistyp (Typ) und eine Rückruffunktion (Handler). Mit dieser Rückruffunktion nehmen wir tatsächlich die Zustandsänderungen vor und sie akzeptiert den Zustand als ersten Parameter.

4. Getter

Vuex ermöglicht es uns, „Getter“ im Store zu definieren (die als berechnete Eigenschaften des Stores betrachtet werden können). Genau wie berechnete Eigenschaften wird der Rückgabewert eines Getters entsprechend seinen Abhängigkeiten zwischengespeichert und nur dann neu berechnet, wenn sich seine Abhängigkeitswerte ändern

const getters = {
  getRateInitData: state => state.rateInitData,
  getchooseRateObj: state => state.chooseRateObj,
  getSearchRateParams: state => state.searchRateParams,
  getSearchRateResult: state => state.searchRateResult,
  getRateUserInfo: state => state.RateUserInfo,
  getMenuList: state => state.menuList,
  getRateQueryParams: state => state.rateQueryParams,
  getRateQueryResult: state => state.rateQueryResult,
  getCheckRateDetailParams: state => state.checkRateDetailParams,
  getReferenceCondition: state => state.referenceCondition,
  getWaitApprovalParams: state => state.waitApprovalParams
}

Axios ist ein offizielles http-Anforderungspaket empfiehlt die Verwendung von axios für http-Aufrufe.

npm install axios --save

1. Senden Sie eine GET-Anfrage

//通过给定的ID来发送请求
axios.get('/user?ID=12345')
  .then(function(response){
    console.log(response);
  })
  .catch(function(err){
    console.log(err);
  });
//以上请求也可以通过这种方式来发送
axios.get('/user',{
  params:{
    ID:12345
  }
})
.then(function(response){
  console.log(response);
})
.catch(function(err){
  console.log(err);
});
2、发送一个POST请求
axios.post('/user',{
  firstName:'Fred',
  lastName:'Flintstone'
})
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});

Das obige ist der detaillierte Inhalt vonWas sind die Eimer der Vue-Familie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!