VueJSのルートデータにアクセスできない

Question

これは私の最初の投稿であるstackoverflowです。私の質問;

私はVueJSプロジェクトをセットアップしました。別のコンポーネントからApp.vueに入れたデータにアクセスしようとしています。これを行うには、たとえば$ root.countを使用しますが、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', 
    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 } 
}); 

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> 

だから、最後のログ・リターンsは未定義です。しかし、これを。$ rootに記録すると、オブジェクトを取得します。誰も考えられない？前もって感謝します！

Answer 1

Vuexは罰金と、すべてのですが、あなただけのルータベースのアプリで、あなたのすべてのビューにプロパティを公開したい場合は、ルータ・ビューでそれを設定することができます。

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

あなたのビューコンポーネントは、それを小道具として受け入れるだけです。

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

Answer 2

あなたはそうすべきではありません。

間違いなく、他のコンポーネントにアクセスしないでください。

コンポーネント間でデータを共有するには、props（一方向バインディング）またはVuexを使用して、ストアを通じてすべてのコンポーネントからデータにアクセスして編集可能にすることができます。

あなたはVueのアプリこの方法が開始されます場合は、グローバル$storeまたは$routerを使用することができます。

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

その後、あなたは（（状態をこのように変異していない）状態変更またはアクセス状態のため）ストアにアクセスすることができます - this.$store.state.yourStaneName

Answer 3

正常に機能しているはずです。hereです。

しかし、コンポーネント間で利用できるグローバル変数を管理するためのより良い方法は、ステートマシンによって解決する必要があります。 Vueは、hereと記載されている目的のためにVuexです。