Vue.js 2 - Vuexを使用せずにビュー間でXHRデータを共有する？

Question

私は自分自身を教えています。Vue.js 2.私の仕事は、Hacker News APIからの投稿のリストを取得することです。リスト投稿をクリックすると、その特定の投稿のデータの一部が表示されます。

第1ビューから第2ビューへのルーティング時に第2ビューにデータが取り込まれるREST APIデータを取得する方法を理解するのは非常に困難です。

（私は（それは、このような小さなアプリケーションです）Vuex）？（VUE-ルータとVUE-リソースを使用して、いないよ。）以下

はItem.vueとList.vueです。 List.vueから、リストアイテムをクリックしてItem.vueにルーティングしようとしています。たとえば、「Guy Has Vough With Vue」というリスト項目をクリックして、2番目のビューを開いて、タイトルのタイトル、スコア、URL、および「Guy Has Tough Time with Vue」のコメントを表示します。

List.vue（リスト、XHRリクエストを作成します）

<template> 
<div class="list-container"> 
<h1>List Vue</h1> 
<ul class="item-list" v-for="(item, index) in this.items"> 
    <li> 
    <router-link class="list-item" :to="/views"> 
     {{index + 1}}. {{item.title}} 
     <div class="points"> 
     Points: {{item.points}} 
     </div> 
    </router-link> 
    </li> 
</ul> 
</div> 
</template> 
<script> 
export default { 
name: 'List', 
props:[] 
data(){ 
    return { 
    items: [] 
    } 
}, 
mounted: function(){ 
    console.log("created"); 
    this.fetchList(); 
}, 
methods: { 
    fetchList(){ 
    this.$http.get('http://hn.algolia.com/api/v1/search?query=javascript&hitsPerPage=25').then((response) => { 
    this.items = response.data.hits; 
    }) 
    } 
} 
} 

Item.vue（List.vueから項目固有のデータを受信します）事前に

<template> 
<video id="bgvid" playsinline autoplay loop> 
    <source src="./src/assets/rad.mp4" type="video/mp4"> 
    <div class="item-container"> 
<h1>Item Vue</h1> 
<div class="post-title"></div> 
<div class="post-score"></div> 
<div class="post-url"></div> 
<ul class="post-comments"> 
    <li class="sngl-comment"> 

    </li> 
</ul> 

</div> 
</video> 
</template> 
<script> 
export default { 
name: 'Item', 
data(){ 
    return { 
    item: {} 
} 
}, 
mounted: function(){ 
    console.log("created"); 
}, 
methods: { 

} 
} 
</script> 

ありがとう！

Answer 1

問題は、最初のビューは2番目のビューの直系の子孫ではないため、データを渡すことができないということです。私は実際の例として、代わりに私は特定のリスト項目のルートでidを渡すとidによってその個々のアイテムを取得するだろう、このためvuexを使用することではないでしょう。ここ

const View1 = { 
    template: `<div> 
    <ul> 
     <li v-for="item in list"><router-link :to="'view2/'+item.id">{{item.name}}</router-link></li> 
    </ul> 
    </div>`, 
    data() { 
    return { 
     list: [{ 
     id: 1, 
     name: 'foo' 
     }, { 
     id: 2, 
     name: 'bar' 
     }, { 
     id: 3, 
     name: 'baz' 
     }] 
    } 
    } 
} 

const View2 = { 
    template: `<div>Fetch item {{id}} <br /><router-link to="/">back</router-link></div>`, 
    created(){ 
    console.log('Fetch data for item '+ this.id); 
    }, 
    computed:{ 
    id(){ 
     return this.$route.params.id 
    } 
    } 
} 

const routes = [{ 
    path: '/', 
    component: View1 
}, { 
    path: '/view2/:id', 
    component: View2 
}] 

const router = new VueRouter({ 
    routes // short for `routes: routes` 
}) 

var app = new Vue({ 
    router 
}).$mount('#app') 

、私はしましたView2のルートをview2/:id（Dynamic route matching参照）に設定し、View2コンポーネントでthis.$route.params.id経由でそのIDにアクセスできます（これは計算済みです）。 idを入手したら、特定のアイテムのデータをajaxリクエストすることができます。

そして、ここではJSFiddleです：あなたには、いくつかの理由で、特定のIDでレコードを取得することができないと、あなたは意志、コールを複製したくない場合はVuex

を使用してhttps://jsfiddle.net/craig_h_411/3hwr6mcd/

Vuexが入っている場所とそれ以外の場所との間で状態を共有する必要があります。

vuexは誤解を招いていますが、いくつかのコンポーネント間で状態を共有したい場合は非常にシンプルですそれは10kb未満ですサイズ）ので、実際にそれを避けるためにしようと多くの使用がない、あなたのプロジェクトに追加する必要があるすべては次のとおりです。

store.jsあなたのアプリで次に

import Vue from 'vue' 
import Vuex from 'vuex' 

Vue.use(Vuex) 

const store = { 
    state:{ 
    item: {} 
    }, 
    mutations:{ 
    setItem(state, value){ 
     state.item = value; 
    } 
    } 
} 

export default new Vuex.Store(store) 

。JS（またはどこでもあなたのメインVueのインスタンスを持っている）あなたのようなものだろう：取得するために計算を追加して、あなたはまた、このようなルートにプッシュする前の状態をコミットするようにいくつかの変更を加える必要があります

import Vue from 'vue' 
import store from './store' 

import App from './components/App.vue' 

new Vue({ 
    store, // this will be available in components via this.$store 
    render: h => h(App) 
}).$mount('#app') 

をストアからの状態と、不要になったルートからIDを削除します。

私はそれがどのように動作するかをお見せするためにJSFiddleを更新しました：https://jsfiddle.net/craig_h_411/bvswc0kb/