Communication entre composants Vue : utilisation des plugins Vuex pour la communication entre composants

Communication entre composants Vue : utilisez le plug-in Vuex pour la communication entre composants

Dans le développement de Vue, la communication entre composants est une exigence très courante et importante. Dans Vue, l'utilisation du plug-in Vuex peut facilement réaliser une communication entre composants, ce qui non seulement simplifie le code, mais améliore également l'efficacité du développement.

Qu'est-ce que Vuex

Vuex est le mode de gestion d'état de Vue.js, utilisé pour gérer de manière centralisée l'état de tous les composants dans les applications Vue. Il est basé sur l'architecture Flux et les idées de conception Redux, fournissant un mécanisme de gestion d'état prévisible pour Vue.

Dans Vuex, tous les états sont stockés dans un entrepôt de données global (magasin) et peuvent être consultés et modifiés via l'attribut state dans le magasin. Les composants modifient l'état dans le magasin en distribuant et en validant des mutations.

Installer et configurer Vuex

Tout d'abord, nous devons installer Vuex dans le projet Vue. Il peut être installé via npm ou Yarn :

npm install vuex --save

Ensuite, créez un dossier nommé store dans notre projet Vue pour stocker le code lié à Vuex. Dans le dossier du magasin, créez un fichier nommé index.js comme fichier de configuration Vuex.

Dans le fichier index.js, nous devons importer Vue et Vuex et créer une nouvelle instance Vuex.Store. Le code est le suivant :

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 状态数据
  },
  mutations: {
    // 状态改变方法
  },
  actions: {
    // 异步操作方法
  },
  modules: {
    // 模块化配置
  }
})

Dans le code ci-dessus, nous pouvons voir que l'état est utilisé pour stocker les données d'état, les mutations sont utilisées pour définir des méthodes pour changer l'état, les actions sont utilisées pour définir les méthodes de fonctionnement asynchrone et les modules sont utilisés. pour diviser le magasin en modules.

Utiliser Vuex dans un composant

Pour utiliser Vuex dans un composant, vous devez d'abord importer Vuex et utiliser la propriété calculée de Vue pour mapper l'état du magasin aux propriétés du composant.

Par exemple, dans un composant appelé Counter, nous souhaitons implémenter la fonction d'augmentation du nombre en cliquant sur un bouton. Tout d'abord, importez Vuex dans le composant, définissez un nombre d'attributs calculé, puis mappez le nombre d'états dans le magasin à cet attribut. Le code est le suivant :

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  }
}

Ensuite, utilisez l'attribut count dans le modèle pour le rendu. Le code est le suivant :

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

Enfin, définissez un incrément de méthode dans le composant pour augmenter le nombre en distribuant des mutations. Le code est le suivant :

import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['INCREMENT']),
    increment() {
      this.INCREMENT()
    }
  }
}

Dans le code ci-dessus, nous utilisons la méthode mapMutations pour mapper la méthode INCREMENT à la méthode du composant, afin que la méthode INCREMENT puisse être directement appelée dans le composant pour déclencher des mutations.

Communication entre composants

Vuex peut non seulement mettre en œuvre la gestion de l'état local dans les composants, mais également réaliser une communication entre composants, c'est-à-dire le partage de données et la communication entre différents composants.

Par exemple, nous avons deux composants : A et B. Il existe un état appelé message dans le composant A, et nous souhaitons obtenir et afficher cet état dans le composant B.

Tout d'abord, dans le modèle du composant A, nous devons utiliser this.$store.state.message pour obtenir l'état. Le code est le suivant :

<template>
  <div>
    <p>当前消息：{{ $store.state.message }}</p>
  </div>
</template>

Ensuite, dans le composant B, nous devons mapper l'état du message dans le composant A à cette propriété via la propriété calculée. Le code est le suivant :

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['message'])
  }
}

Enfin, utilisez l'attribut message dans le modèle du composant B pour le rendu. Le code est le suivant :

<template>
  <div>
    <p>组件A中的消息：{{ message }}</p>
  </div>
</template>

Grâce aux étapes ci-dessus, nous pouvons réaliser le partage de données et la communication entre le composant A et le composant B.

Résumé :

Grâce au plug-in Vuex, nous pouvons simplifier le transfert de données et la communication entre les composants et améliorer l'efficacité du développement. Dans le même temps, l'utilisation de Vuex rend également notre code plus clair et plus facile à maintenir. Par conséquent, dans le développement de Vue, il est recommandé d'utiliser le plug-in Vuex pour la communication des composants.

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!