Bolehkah komponen Vue mengakses pembolehubah dalam App.vue?

Question

Saya mempunyai aplikasi dalam Vue.js dan di dalamnya terdapat App.vue seperti ini:

<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>

Bolehkah saya mengakses pembolehubah pengguna daripada komponen lain entah bagaimana? Bagaimanakah saya harus mengeksport dan mengimportnya dengan jayanya?

Answer 1

4. $root.someVariable

Berfungsi dalam Vue 2, tidak diuji dalam 3.

Answer 2

Anda boleh:

1. Luluskan sebagai prop
   • Nota: Untuk menukarnya daripada komponen kanak-kanak, anda harus memancarkan acara memberitahu root untuk mengemas kininya. Jangan cuba mengubahnya secara langsung dalam keturunan.
2. Gunakan sediakan/suntik
3. Alih 用户 ke penyelesaian keadaan kongsi seperti Vuex atau Pinia