Können Vue-Komponenten auf Variablen in App.vue zugreifen?

Question

Ich habe eine Anwendung in Vue.js und darin gibt es ein App.vue wie dieses:

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

Kann ich irgendwie von anderen Komponenten aus auf Benutzervariablen zugreifen? Wie soll ich es erfolgreich exportieren und importieren?

Answer 1

4. $root.someVariable

在 Vue 2 中工作，未在 3 中测试。

Answer 2

你可以：

1. 将其作为 prop 传递
   • 注意：要从子组件更改它，您应该发出一个事件告诉 root 更新它。不要尝试直接在子代中对其进行突变。
2. 使用提供/注入
3. 将用户移至共享状态解决方案，例如Vuex或Pinia