Qu'est-ce que le bucket familial vue.js ?

Le bucket de la famille vue.js est le composant principal du projet vue complet, comprenant les styles vue-router, vuex, vue-resource, vue-cli et sass. vue-cli est un échafaudage permettant de créer rapidement des applications d'une seule page.

seau de la famille vue :

Contient vue-router, vuex, vue-resource, ainsi que des outils de construction vue-cli, sass Styles, ces sont les composants essentiels d'un projet Vue complet.

(Partage vidéo d'apprentissage : Tutoriel vidéo javascript)

En résumé :

1. Outil de création de projet ; ; 4. Outil de requête http.

Introduction détaillée :

Les deux idées principales de Vue : la composantisation et la gestion des données.

Componentisation : divisez le tout en individus réutilisables ;

Axée sur les données : affecte directement l'affichage de la nomenclature via les modifications des 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 pour l'utiliser 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 commutation pages.

3. vuex

Vuex est une gestion d'état développée spécifiquement 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 :

(1)

store.getters['getRateUserInfo']

(2)

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

Remarque : vous pouvez utiliser mapState pour combiner le global state et 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 au lieu de 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) Envoyer une requête POST

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

Recommandations associées : Tutoriel vue.js

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!