无法访问VueJS中的根数据

Question

这是我在 stackoverflow 上的第一篇文章，如果我做错了什么，请提前抱歉。我的问题;

我已经设置了一个 VueJS 项目，并且正在尝试从另一个组件获取放入 App.vue 中的数据。为此，我使用 this.$root.count 例如，但它返回未定义。

主要.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',
    component: function (resolve) {
        require(['./components/Hello.vue'], resolve)
    }
}, {
    path: '/race-pilot',
    name: 'racePilot',
    component: function (resolve) {
        require(['./components/RacePilot.vue'], resolve)
    }
}
});

new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { 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 './components/Hello'

export default {
    name: 'app',
    components: {
        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>

所以最后一条日志返回未定义。但是，如果我记录 this.$root，我确实得到了该对象。有人有什么想法吗？提前致谢！

Answer 1

Vuex 很好，但是如果您只想向基于路由器的应用程序中的所有视图公开一个属性，您可以在路由器视图上设置它。

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

然后你的视图组件只需要接受它作为道具。

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