Comment fournir des modules de fonction dans le projet vue

En tant que développeur front-end, lors du développement d'un projet Vue, c'est une exigence de base de fournir des pages contenant des modules fonctionnels. Les modules fonctionnels font référence à des blocs de code réutilisables liés à la page. Vue propose de nombreuses méthodes pour y parvenir. Cet article présentera les méthodes en détail.

1. Utiliser les plug-ins Vue

Les plug-ins Vue sont des modules fonctionnels indépendants qui peuvent être utilisés directement dans les projets Vue. La communauté Vue a développé un grand nombre d'excellents plug-ins, tels que vue-router, vuex, etc. Avant d'utiliser ces plug-ins, nous devons les présenter et les enregistrer via Vue.use().

Vous pouvez utiliser les méthodes suivantes pour introduire des plug-ins dans un projet Vue :

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'

Vue.use(VueRouter)
Vue.use(Vuex)

Par exemple, vue-router est un plug-in de routage Si un projet Vue doit utiliser vue-router, il doit être installé. et introduit en premier, puis enregistré en tant que plug-in Vue utilisé dans Vue.

2. Composants globaux

Les composants dans Vue peuvent être considérés comme l'une des fonctions les plus basiques du développement de Vue. Nous pouvons réutiliser le code via des composants, réalisant ainsi également la division des modules fonctionnels.

Enregistrer un composant global dans Vue est très simple, utilisez simplement la méthode Vue.component(). Voici un exemple :

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

De cette façon, nous avons réussi à enregistrer un composant global nommé my-component, qui peut être utilisé n'importe où dans l'application :

<my-component></my-component>

L'utilisation de composants pour encapsuler des modules fonctionnels peut rendre le code plus clair et plus facile à maintenir. . Si vous utilisez des modules fonctionnels fréquemment utilisés dans votre projet, vous pouvez envisager de les encapsuler dans des composants pour utiliser pleinement le mécanisme de réutilisation des composants Vue de Vue.

3. Composants locaux

Si tous les composants sont enregistrés en tant que composants globaux, le nombre de composants augmentera, ce qui entraînera une liste de composants globaux gonflée. Il existe une autre façon d'utiliser des composants pour définir des modules fonctionnels dans Vue, à savoir les composants locaux. Les composants locaux ne sont disponibles que dans la portée du composant dans lequel ils sont définis.

Voici un exemple montrant comment définir un composant local dans un composant :

// 父组件
Vue.component('parent-component', {
  components: {
    'child-component': {
      template: '<div>A custom component!</div>'
    }
  },
  template: '<div><child-component></child-component></div>'
})

Ici, nous définissons un composant local nommé child-component dans le composant parent puis l'utilisons dans le modèle du composant parent. De cette façon, le composant enfant ne sera utilisé que dans le composant parent et ne deviendra pas un composant global.

L'utilisation de composants locaux peut également éviter le problème des noms en double des composants globaux. Si différents composants définissent un composant global portant le même nom, un conflit de nom se produira. À l'aide de composants locaux, les composants portant le même nom peuvent être définis dans leurs propres étendues pour éviter ce problème.

4. Routage des composants

Le routage est également l'un des modules fonctionnels couramment utilisés dans les projets Vue. Nous résumons généralement une règle de routage en un composant, c'est-à-dire un routage composant.

Dans Vue Router, vous pouvez utiliser l'attribut composant pour spécifier le composant correspondant à la route :

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

Home et About ici sont tous deux des composants, et chaque route correspond à un composant. L'avantage du routage composant est que le routage et. L'interface peut être décomposée en couplage, obtenant ainsi l'effet d'une cohésion élevée et d'un faible couplage.

5. Gestion d'état

Dans la bibliothèque de gestion d'état de Vue, vuex, elle fournit également une méthode de division des modules fonctionnels. À l'aide de concepts tels que les actions, les mutations et les getters dans vuex, les fonctions peuvent être divisées en différents états.

Nous pouvons changer l'état grâce à des mutations, obtenir l'état via des getters et effectuer des opérations asynchrones via des actions. Chaque état correspond à une fonction de traitement fixe, et ces fonctions de traitement sont stockées dans un seul dossier, réalisant la division des modules fonctionnels.

Par exemple, supposons que nous ayons une page qui doit gérer les informations utilisateur et les informations produit. Dans vuex, elle peut être définie comme suit :

const store = new Vuex.Store({
  state: {
    userInfo: {},
    productList: []
  },
  mutations: {
    updateUserInfo (state, userInfo) {
      state.userInfo = userInfo
    },
    updateProductList (state, productList) {
      state.productList = productList
    }
  },
  getters: {
    getUserInfo (state) {
      return state.userInfo
    },
    getProductList (state) {
      return state.productList
    }
  },
  actions: {
    async fetchUserInfo ({ commit }, userId) {
      const userInfo = await getUserInfo(userId)
      commit('updateUserInfo', userInfo)
    },
    async fetchProductList ({ commit }) {
      const productList = await getProductList()
      commit('updateProductList', productList)
    }
  }
})

Dans cet exemple, nous divisons les informations utilisateur et les informations produit en deux statuts, et les mutations, les getters et les actions pour les gérer sont définis respectivement. De cette manière, nous conservons non seulement les caractéristiques indépendantes de chaque module fonctionnel, mais réalisons également le transfert de données entre eux.

6. Résumé

Les méthodes ci-dessus sont toutes des méthodes de segmentation de modules fonctionnels couramment utilisées dans Vue. Les développeurs front-end peuvent choisir la méthode appropriée pour réaliser une modularisation fonctionnelle en fonction de scénarios spécifiques. Quelle que soit la méthode que vous choisissez, vous devez maintenir une cohésion élevée et un faible couplage du code pour rendre le projet Vue plus facile à maintenir et à développer.

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!