親ルートから子ルートにデータにアクセスするにはどうすればよいですか？

Question

私が持っている2ルート構成部品：

1）Aの人々の製品リストコンポーネント 2）

がリストの製品を示し、その後に歴史を使用して、その製品へのルータのリンクがある製品の詳細コンポーネントルータ定義/スコープ。

私が達成しようとしているのは、親リストルートから子詳細製品テンプレートにデータを取得することです。

これまでのところ、うまくいかず、私は何がうまくいかないのか疑問に思いました。

{ 
"products": [ 
{ 
"id": 8494684881, 
"title": "Long Shirt Dress (Gargrave)", 
"handle": "copy-of-long-shirt-dress-tudor", 
"body_html": "", 
"published_at": "2017-01-19T22:24:00-11:00", 
"created_at": "2017-01-19T23:25:58-11:00", 
"updated_at": "2017-01-19T23:38:05-11:00", 
"vendor": "in-grid", 
"product_type": "Shirt Dress", 
"tags": [], 
"variants": [], 
"images": [], 
"options": [] 
}, 

：私は以下で遊んでいたデータAPIのアイデアもここ

<section id="home-container" class="parralex-scroll"> 
    <div class="wrapper"> 
    <div class="grid"> 
     <template id="people-listing-template"> 
     <div class="wrapper grid" id="start-parralex"> 

      <div class="grid__item large--one-third medium--one-whole no-padding" v-for="product in products" v-cloak> 

       <router-link :to="{ name: 'product', params: { handle: product.handle }}"> 

        <div class="inner-container relative"> 

        <div class="pad-normal absolute top-0 left-0 large--one-whole"> 
         <p class="lyon-text"> 
         ${ product.title }, <span>£${ product.variants[0].price }</span> 
         </p> 
         <p class="univers uppercase smaller body-size"> 
         Buy now 
         </p> 
        </div> 

        <div v-for="image in product.images"> 
         <img class="scale-with-grid archives-image" v-bind:src="image.src" v-bind:alt="image.id"> 
        </div> 

        </div> 

       </router-link> 

      </div> 

      <router-view></router-view> 
     </div> 
     </template> 

     <template id="product-detail-template"> 
     <div> 
     <h1>{{ $route }}</h1> 
     </div> 
     </template> 
    </div> 
    </div> 
</section> 

されています。私は、この持っているテンプレートに続いて

Vue.use(VueResource); 
Vue.use(VueRouter); 
Vue.config.devtools = true; 


// const Home = { template: '<div>home</div>' } 
const PeopleListing = ('people-listing', { 
    template: '#people-listing-template', 
    delimiters: ['${', '}'], 
    data: function() { 
     return { 
      products: [] 
     } 
    }, 
    mounted: function() { 
     this.getAllProducts(); 
    }, 

    methods: { 
     getAllProducts: function(){ 

      this.$http.get('/collections/homepage/products.json').then(function (response) { 

       $.each(response.data.products, function(key, value) { 
        var product = value; 
        this.products.push(product); 
       }.bind(this)); 


      }.bind(this), function (response) { 

       console.log('error getting beers from the pivot table'); 

      }); 

     } 
    }, 

    props: ['people-listing'] 

}); 

const ProductDetail = ('product-detail', { 
    template: '#product-detail-template', 
    delimiters: ['${', '}'], 
    data: function() { 

     var filtered = this.$parent.data.products.filter(function(item) { 
      return (item.handle == parent.handle) ? item : false; 
     }); 

     return { 
      product: filtered[0] 
     } 

    }, 

    props: ['product'] 

}); 


const router = new VueRouter({ 
    mode: 'history', 
    routes: [ 
     {path: '/', component: PeopleListing}, 
     {name: 'product', path: '/products/:handle', component: ProductDetail } 
    ] 
}); 


new Vue({ 
    router, 
    el: "#home-container", 
    delimiters: ['${', '}'], 
    methods: { 

     // Load nav in case we need to preload it later 
     // on for speed 

     prerenderLink: function(e) { 
      var head = document.getElementsByTagName("head")[0]; 
      var refs = head.childNodes; 
      ref = refs[ refs.length - 1]; 

      var elements = head.getElementsByTagName("link"); 
      Array.prototype.forEach.call(elements, function(el, i) { 
       if (("rel" in el) && (el.rel === "prerender")) 
        el.parentNode.removeChild(el); 
      }); 

      var prerenderTag = document.createElement("link"); 
      prerenderTag.rel = "prerender"; 
      prerenderTag.href = e.currentTarget.href; 
      ref.parentNode.insertBefore(prerenderTag, ref); 
     }, 

    } 

}); 

：ここに私のコードです子ルートに親データを取得して、その製品から詳細を取得することは可能ですか？

Answer 1

Vuexはあなたの答えです。 実際にコンポーネント間でデータを正しく共有するには、データを格納する必要があります。

だけVuexのドキュメントに従ってください：https://vuex.vuejs.org/en/intro.html

、お店を初期化し、必要なアクション/変異 を作成して、あなただけ使用する必要がありますあなたの子コンポーネント内のデータを取得するために：

computed() { 
someData: { 
return this.$store.states.someDataFromParaent 
} 
}