Can Vue components access variables in App.vue?

Question

I have an application in Vue.js, and in it there is an App.vue like this:

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

Can I access user variables from other components somehow? How should I export and import it successfully?

Answer 1

4. $root.someVariable

Works in Vue 2, not tested in 3.

Answer 2

you can:

1. Pass it as prop
   • Note: To change it from a child component, you should emit an event telling root to update it. Don't try to mutate it directly in the offspring.
2. Use Provide/Inject
3. Move users to a shared state solution such as Vuex or Pinia