Que comprend le bucket de la famille vue.js ?

Le package de compartiment de la famille vue.js comprend : 1. [vue + vuex] gestion de l'état 2. [vue-router] 3. [vue-resource] ;

[Recommandations d'articles connexes : vue.js]

vue.js Family Bucket Les packages incluent :

seau familial vue : vue + vuex (gestion de l'état) + vue-router (routage) + vue-resource +axios +cadre UI (iview, vant, elementUI, etc.)

Vue propose une célèbre série de buckets familiaux, notamment vue-router (http://router.vuejs.org), vuex (http://vuex.vuejs.org), vue-resource (https:// github.com/pagekit/vue-resource). Couplé à l'outil de construction vue-cli et au style sass, c'est le composant central d'un projet vue complet.

En résumé, c'est : 1. Outil de construction de projet, 2. Routage, 3. Gestion d'état, 4. Outil de requête http.

Ce qui suit est une introduction distincte

Avant-propos : les deux idées fondamentales de Vue : la composantisation et la 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. 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 lors de l'utilisation , Vous pouvez utiliser l'attribut de transition de Vue pour restituer l'effet du changement de page.

3. vuex

Vuex est une gestion d'état spécialement développée pour les applications vue.js et 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 à l'exception du mudle,

1, état

données similaires à l'objet vue, utilisé pour stocker données et statut. 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 :

La première :

store.getters['getRateUserInfo']

La seconde :

...mapGetters({
        UserInfo: 'login/UserInfo', // 用户信息
        menuList: 'getMenuList', // approve 运价审批
        RateUserInfo: 'getRateUserInfo' // Rate用户信息
   })

Remarque : vous pouvez utiliser mapState pour modifier l'état global et les getters sont mappés aux propriétés calculées du composant actuel.

2. Actions

L'action est déclenchée via la méthode store.dispatch : l'action prend en charge les appels asynchrones (l'API peut être appelée), les mutations prennent uniquement en charge la synchronisation des opérations et les actions soumettent des mutations, pas des modifications directes. État.

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 valider 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) :

actions:{
  increment ({ commit }){
    commit('increment')
  }
}

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'assistant 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. Le site officiel de Vue 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. Une requête POST

axios.post('/user',{
  firstName:'Fred',
  lastName:'Flintstone'
})
.then(function(res){
  console.log(res);
})
.catch(function(err){
  console.log(err);
});

5. Faites correspondre les frameworks d'interface utilisateur tels que : iview, vant, elementUI

iview Un ensemble de bibliothèques de composants d'interface utilisateur de haute qualité basées sur Vue (divisées en petits programmes et version PC) ;

vant est une bibliothèque de composants mobiles Vue légère et fiable. Il s'agit d'un ensemble de bibliothèques de composants mobiles basées sur Vue 2.0 open source par Youzan, visant à développer Beautiful plus rapidement et plus facilement. et un site mobile facile à utiliser basé sur Vue.

Ant Design Vue est une implémentation Vue d'Ant Design qui développe et sert des produits backend au niveau de l'entreprise.

elementUI est basé sur la bibliothèque de composants intermédiaires et back-end du bureau Vue 2.0.

Recommandations d'apprentissage gratuites associées :

JavaScript

(vidéo)

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!