Vue et Vue-Router : Comment partager des données entre composants ?

Vue et Vue-Router : Comment partager des données entre composants ?

Introduction : 
Vue est un framework JavaScript populaire pour créer des interfaces utilisateur. Vue-Router est le gestionnaire de routage officiel de Vue, utilisé pour implémenter des applications monopage. Dans les applications Vue, les composants sont les unités de base pour créer des interfaces utilisateur. Dans de nombreux cas, nous devons partager des données entre différents composants. Cet article présentera quelques méthodes pour vous aider à réaliser le partage de données dans Vue et Vue-Router, ainsi que des exemples de code spécifiques.

Variables globales :
Le moyen le plus simple dans Vue est d'utiliser des variables globales pour partager des données. Vous pouvez définir les données qui doivent être partagées en tant que propriétés sur l'instance Vue. De cette façon, les données seront visibles dans tous les composants. Voici un exemple simple :

// main.js
import Vue from 'vue'
Vue.prototype.$sharedData = { name: 'John' }

// App.vue
<template>
  <div>
    <h1>{{ $sharedData.name }}</h1>
    <ChildComponent></ChildComponent>
  </div>
</template>

// ChildComponent.vue
<template>
  <div>
    <h2>{{ $sharedData.name }}</h2>
  </div>
</template>

En définissant $sharedData sur le prototype Vue, nous pouvons accéder aux données partagées dans n'importe quel composant via this.$sharedData . $sharedData，我们可以在任意组件中通过this.$sharedData来访问共享的数据。

Vuex：
如果你的应用需要更复杂的状态管理，Vue官方提供了一个强大的状态管理模式和库——Vuex。Vuex将所有共享的数据集中管理，通过store对象来访问数据。以下是一个使用Vuex的示例：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    name: 'John'
  },
  mutations: {
    updateName(state, payload) {
      state.name = payload
    }
  },
  actions: {
    updateNameAsync({ commit }, payload) {
      setTimeout(() => {
        commit('updateName', payload)
      }, 1000)
    }
  },
  getters: {
    getName: state => {
      return state.name
    }
  }
})

export default store

// App.vue
<template>
  <div>
    <h1>{{ $store.state.name }}</h1>
    <button @click="updateName">更新名字</button>
    <ChildComponent></ChildComponent>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['updateName']),
  }
}
</script>

// ChildComponent.vue
<template>
  <div>
    <h2>{{ $store.state.name }}</h2>
  </div>
</template>

在这个示例中，我们使用Vuex创建了一个store对象。store中的state对象存储共享的数据。mutations对象定义了更新数据的方法，actions对象定义了异步更新数据的方法。getters对象定义了获取数据的方法。在组件中，我们可以通过this.$store.state来获取共享的数据，并通过commit方法调用mutations中的方法来更新数据。

通过props传递数据：
在Vue中，组件之间可以通过props来传递数据。这是一种常见的组件通信方式，特别适用于父子组件之间。以下是一个使用props传递数据的示例：

// App.vue
<template>
  <div>
    <h1>{{ name }}</h1>
    <ChildComponent :name="name"></ChildComponent>
  </div>
</template>

// ChildComponent.vue
<template>
  <div>
    <h2>{{ name }}</h2>
  </div>
</template>
<script>
export default {
  props: ['name']
}
</script>

在这个示例中，我们在父组件中通过:name="name"

Vuex :

Si votre application nécessite une gestion d'état plus complexe, Vue fournit officiellement un modèle et une bibliothèque de gestion d'état puissants - Vuex. Vuex gère de manière centralisée toutes les données partagées et accède aux données via les objets du magasin. Voici un exemple utilisant Vuex :
rrreee

Dans cet exemple, nous créons un objet store en utilisant Vuex. L'objet d'état dans le magasin stocke les données partagées. L'objet mutations définit des méthodes de mise à jour des données et l'objet actions définit des méthodes de mise à jour asynchrone des données. L'objet getters définit des méthodes pour obtenir des données. Dans le composant, nous pouvons obtenir les données partagées via this.$store.state et appeler les méthodes dans les mutations via la méthode commit pour mettre à jour les données. 🎜🎜Transférer des données via des accessoires : 🎜Dans Vue, les données peuvent être transmises entre les composants via des accessoires. Il s'agit d'un moyen courant de communication entre composants, en particulier entre les composants parents et enfants. Voici un exemple de transmission de données à l'aide d'accessoires : 🎜rrreee🎜 Dans cet exemple, nous transmettons l'attribut name au composant enfant via :name="name" dans le composant parent. Le composant enfant reçoit des données via l'attribut props et les affiche sur la page. 🎜🎜Résumé : 🎜Cet article présente plusieurs méthodes pour réaliser le partage de données entre les composants de Vue et Vue-Router. Grâce aux variables globales, Vuex et props, nous pouvons choisir la manière appropriée de partager les données en fonction des besoins de l'application. J'espère que ces exemples vous seront utiles. 🎜

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!