Que sont les buckets de la famille Vue ?

Tutoriels recommandés : Tutoriel VUE.JS

Vue propose la célèbre série de seaux familiaux , y compris vue-router, vuex, vue-resource. Couplé à l'outil de construction vue-cli et au style sass, c'est le composant central d'un projet vue complet.

Pour résumer :

1. Outil de construction de projet

2. Routage

　3. Gestion des statuts

　4. Outil de requête http.

Ce qui suit est une introduction distincte à la

Préface : Les deux idées principales de Vue : Componentisation et gestion des données. Componentisation : diviser le tout en individus réutilisables, basés sur les données : affecter directement l'affichage de la nomenclature via des modifications de données, en évitant les opérations DOM.

1. Vue-cli est l'échafaudage pour créer rapidement cette application d'une seule page,

# 全局安装 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

Si vous l'utilisez dans un projet modulaire, vous devez explicitement installer la fonction de routage via Vue.use() :

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

Notez également que pendant l'utilisation, vous pouvez utiliser l'attribut de transition de vue pour restituer l'effet de changement de page.

3. vuex

La gestion d'état développée par vuex spécifiquement pour les applications vue.js peut être comprise comme une gestion globale des données. Vuex est principalement composé de cinq parties : action d'état, mutation, getters et mudle.

Le processus d'utilisation est le suivant : Les quatre parties ci-dessus peuvent être directement appelées dans le composant sauf mudle,

1, état

Semblable aux données de l'objet vue, utilisez Pour stocker les données et l'état. Les données stockées sont réactives. Si les données changent, les composants qui dépendent des données changeront également en conséquence.

Exemples de deux façons d'obtenir l'état :

1.store.getters['getRateUserInfo']

2. UserInfo : 'login/UserInfo', // Informations utilisateur

menuList : 'getMenuList', // approuver l'approbation du tarif de fret

RateUserInfo : 'getRateUserInfo' // Évaluer les informations utilisateur

})

Remarque : l'état global et les getters peuvent être mappés aux propriétés calculées du composant actuel via mapState.

2. actions

L'action est déclenchée par la méthode store.dispatch : l'action prend en charge les appels asynchrones (l'API peut être appelée), les mutations ne prennent en charge que la synchronisation des opérations et le l'action soumise est une mutation plutôt qu'un changement d'état direct.

Par exemple :

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

La fonction Action accepte un objet de contexte avec les mêmes méthodes et propriétés que l'instance du magasin, vous pouvez donc appeler context.commit pour soumettre une mutation ou transmettre le contexte. état et contexte getters pour obtenir l'état et les getters.

En pratique, on utilise souvent la déstructuration des paramètres ES2015 pour simplifier le code (surtout quand on doit appeler commit plusieurs fois) :

3. mutation

Chaque mutation a un type d'événement de chaîne (type) et une fonction de rappel (gestionnaire). Cette fonction de rappel est l'endroit où nous effectuons réellement les changements d'état, et elle accepte l'état comme premier paramètre.

4. Getters

Vuex nous permet de définir des "getters" dans le magasin (qui peuvent être considérés comme des propriétés calculées du magasin). Tout comme les propriétés calculées, la valeur de retour d'un getter sera mise en cache en fonction de ses dépendances, et ne sera recalculée que lorsque ses valeurs de dépendance changeront

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
}

　fonction d'assistance mapGetters

L'auxiliaire mapGetters La fonction mappe simplement les getters du magasin aux propriétés calculées locales :

4. axios Axios est un package de requête http Vue officiel. recommande d'utiliser axios pour les appels http.

Installation :

npm install axios --save

Exemple :

1. Envoyer une requête GET

//通过给定的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);
});

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!