It's my first post on stackoverflow, so sorry in advance if I do something incorrectly. My question;

I've setup a VueJS project, and I'm trying to reach data that I put in the App.vue from another ponent. To do this, I use this.$root.count for example, but it returns undefined.

Main.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'

Vue.use(VueRouter);

const router = new VueRouter({
mode: 'history',
routes: [{
    path: '/',
    name: 'home',
    ponent: function (resolve) {
        require(['./ponents/Hello.vue'], resolve)
    }
}, {
    path: '/race-pilot',
    name: 'racePilot',
    ponent: function (resolve) {
        require(['./ponents/RacePilot.vue'], resolve)
    }
}
});

new Vue({
    el: '#app',
    router,
    template: '<App/>',
    ponents: { App }
});

App.vue:

<template>
<div>
    <div class="menu" ref="menu">
        <router-link :to="{ name: 'home' }">Home</router-link>
        <router-link :to="{ name: 'racePilot' }">Race Pilot</router-link>
    </div>
    <div id="app">
        <router-view></router-view>
    </div>
</div>
</template>

<style src="./assets/css/app.scss" lang="scss"></style>

<script>
import Hello from './ponents/Hello'

export default {
    name: 'app',
    ponents: {
        Hello
    },
    data () {
        return {
            count: '0'
        }
    }
}
</script>

RacePilot.vue:

<template>
<div class="race-pilot">
</div>
</template>

<script>
export default {
    name: 'RacePilot',
    mounted() {
        console.log(this.$root.count);
    }
}
</script>

So the last log returns undefined. However, if I log this.$root, I do get the object. Anybody any idea? Thanks in advance!

It's my first post on stackoverflow, so sorry in advance if I do something incorrectly. My question;

I've setup a VueJS project, and I'm trying to reach data that I put in the App.vue from another ponent. To do this, I use this.$root.count for example, but it returns undefined.

Main.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'

Vue.use(VueRouter);

const router = new VueRouter({
mode: 'history',
routes: [{
    path: '/',
    name: 'home',
    ponent: function (resolve) {
        require(['./ponents/Hello.vue'], resolve)
    }
}, {
    path: '/race-pilot',
    name: 'racePilot',
    ponent: function (resolve) {
        require(['./ponents/RacePilot.vue'], resolve)
    }
}
});

new Vue({
    el: '#app',
    router,
    template: '<App/>',
    ponents: { App }
});

App.vue:

<template>
<div>
    <div class="menu" ref="menu">
        <router-link :to="{ name: 'home' }">Home</router-link>
        <router-link :to="{ name: 'racePilot' }">Race Pilot</router-link>
    </div>
    <div id="app">
        <router-view></router-view>
    </div>
</div>
</template>

<style src="./assets/css/app.scss" lang="scss"></style>

<script>
import Hello from './ponents/Hello'

export default {
    name: 'app',
    ponents: {
        Hello
    },
    data () {
        return {
            count: '0'
        }
    }
}
</script>

RacePilot.vue:

<template>
<div class="race-pilot">
</div>
</template>

<script>
export default {
    name: 'RacePilot',
    mounted() {
        console.log(this.$root.count);
    }
}
</script>

So the last log returns undefined. However, if I log this.$root, I do get the object. Anybody any idea? Thanks in advance!

• javascript
• object
• vue.js

6 Answers 6

Vuex is fine and all, but if you just want to expose a property to all of your views in a router based app, you can set it on the router-view.

<router-view :count="count"></router-view>

Then your view ponent just needs to accept it as a prop.

export default {
    props:["count"],
    name: 'RacePilot',
    mounted() {
        console.log(this.count);
    }
}

this.$root references the top level Vue instance (new Vue...) and not the App VueComponent.

it is really hacky, other solutions are preferable, but this could work:

new Vue({
    el: '#app',
    router,
    template: '<App/>',
    ponents: { App },
    methods: {
      getCount() {
        return this.$children[0].count
      }
    },
});

and using getCount() in RacePilot.vue:

export default {
    name: 'RacePilot',
    mounted() {
        console.log(this.$root.getCount());
    }
}

You are trying to access data which is stored in App.vue but this data will be local to the ponent and not accessible globally.

App.vue is not the root instance (referred to by $root), instead it is the first ponent within the root instance which is actually created at main.js. It is during this creation time, you need to pass the data which will then be exposed for all child ponents via $root.

Here is the relevant portion of main.js, modified accordingly :-

new Vue({
    el: '#app',
    data: { count: 0 },
    router,
    template: '<App/>',
    ponents: { App }
});

Tip : To confirm that App.vue is indeed the first child of root instance, try paring the references of this.$root with this.$parent. It should returntrue which means that root instance is the parent of App.vue.

References :-

https://v2.vuejs/v2/guide/instance.html
https://v2.vuejs/v2/api/#vm-root
https://v2.vuejs/v2/guide/ponents-edge-cases.html#Accessing-the-Root-Instance

It should had worked as it is, as it is working here.

However a better way to manage global variables, which are available across ponents should be solved by state machine. Vue has Vuex for that purpose as stated here.

You should not do it like that.

Definitely you should not try to access other ponents like that.

To share data between ponents you can either use props (one-way binding) or Vuex to make data accessible and editable from all ponents through store.

You can use global $store or $router if you will start your Vue app this way:

new Vue({
    el: '#q-app',
    router,
    store
    render: h => h(require('./App'))
  })

Then you can access store (for state change or access state (do not mutate state this way)) - this.$store.state.yourStaneName

You can also make the App ponent the actual root by passing the ponent directly to the Vue instance, which would look something like this:

new Vue(App).$mount('#app')

You'll probably have to move the router to App.vue, but this will make sure that this.$root will resolve to your App ponent directly.