Les composants Vue peuvent-ils accéder aux variables dans App.vue ?

Question

J'ai une application dans Vue.js et dedans il y a un App.vue comme celui-ci :

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',

 data() {
    return {
      user: null,
    }
  },

  methods: {
       getUser() {
        axios 
        .get(`auth/user/`)
        .then(response => {
          this.user=response.data.pk
        })
      }
  },

  beforeMount() {
    this.getUser();
  },
}
</script>

Puis-je accéder aux variables utilisateur à partir d’autres composants d’une manière ou d’une autre ? Comment dois-je l’exporter et l’importer avec succès ?

Answer 1

4. $root.someVariable

Fonctionne dans Vue 2, non testé en 3.

Answer 2

Vous pouvez :

1. Passez-le comme prop
   • Remarque : pour le modifier à partir d'un composant enfant, vous devez émettre un événement indiquant à root de le mettre à jour. N'essayez pas de le muter directement dans la progéniture.
2. Utilisez fournir/injecter
3. Déplacez 用户 vers une solution à état partagé comme Vuex ou Pinia