このロジックでVueJSアプリケーションを構築する最も効率的な方法は何でしょうか？

Question

私は、条件に応じて、一連のソースから取得したデータを表示するアプリケーションを持っています。問題は、元のソースに応じてデータを取得、整理、返す方法です（1つのメソッドのためだけに他のライブラリをインポートする必要があります）。

私は現在以下の例のように設定していますが、私のソースのリストが100になるとどうなりますか？どのように私はアプリを構成する必要がありますか？ありがとうございました！

<template> 
    <div> 
     <h1>{{data.title}}</h1> 
     <h2>{{data.subtitle}}</h2> 
     <p>{{data.description}}</p> 
    </div> 
</template> 

<script> 
export default { 
    data() { 
      return { 
       data: {} 
      } 
     }, 
     methods: { 
      getFetchMethod() { 
       var i = Math.floor(Math.random() * 3); 
       if (i == 0) { 
        this.getData(); 
       } else if (i == 1) { 
        this.getDataThisWay(); 
       } else if (i == 2) { 
        this.getDataAnotherWay(); 
       } else { 
        this.getDataEtc(); 
       }; 
      }, 
      getData() { 
       this.data = { 
        'title': 'Foo', 
        'subtitle': 'Bar', 
        'description': 'Blah' 
       }; 
      }, 
      getDataThisWay() { 
       this.data = { 
        'title': 'Foo', 
        'subtitle': 'Bar', 
        'description': 'Blah' 
       }; 
      }, 
      getDataAnotherWay() { 
       this.data = { 
        'title': 'Foo', 
        'subtitle': 'Bar', 
        'description': 'Blah' 
       }; 
      }, 
      getDataEtc() { 
       this.data = { 
        'title': 'Foo', 
        'subtitle': 'Bar', 
        'description': 'Blah' 
       }; 
      } 
     }, 
     mounted() { 
      this.getFetchMethod(); 
     } 
} 
</script> 

<style lang="css"> 
</style> 

Answer 1

これはVueJSとは関係ありません。独自のデータセットを持つオブジェクトの配列を作成する必要があります。その後、乱数をインデックスとして使用することができます。

// store all your data in an array (you could make this part of the vuejs data object 
var datasets = [ 
    { 
     title: 'Foo', 
     subtitle: 'Bar', 
     description: 'Blah' 
    }, 
    { 
     title: 'Foo2', 
     subtitle: 'Bar2', 
     description: 'Blah2' 
    } 
    // etc... 
]; 

// get a random number based on the length of your array 
var i = Math.floor(Math.random() * datasets.length); 

// use the random number to index your array 
this.data = datasets[i]; 

UPDATE：あなたはすべてを異なるデータを取得し、複数の機能を持っている、あなたがそれらをインデックス配列に機能を置くことによって、同じアプローチを行うことができると言います。あなたの方法は、特定のコンテキストに依存している場合

// put all the method references (no calling parens) into an array 
var methods = [ 
    this.getData, 
    this.getDataThisWay, 
    this.getDataEtc 
]; 

var i = Math.floor(Math.random() * datasets.length); 

// index the array then call the particular method 
this.data = datasets[i](); 

また、あなたはthis異なるだ特定のコンテキストを提供するためにcall()を使用することができます。

this.data = datasets[i].call(this); // where this is the current context 

Answer 2

私はおそらく、タイトル、サブタイトル、および説明の小道具を取る独自のコンポーネントにテンプレートを作成します。親コンポーネントは、データを取得したにもかかわらずこの子コンポーネントにデータを渡す責任があります。

Child.vue

<template> 
    <div> 
     <h1>{{title}}</h1> 
     <h2>{{subtitle}}</h2> 
     <p>{{description}}</p> 
    </div> 
</template> 

<script> 
export default { 
    props: ["title", "subtitle", "description"] 
} 
</script> 

Parent.vue

<template> 
    <div> 
     <button @click="way1">Way 1</button> 
     <button @click="way2">Way 2</button> 
     <child :title="title" :subtitle="subtitle" :description="description"></child> 
    </div> 
</template> 

<script> 
import Child from "./Child.vue" 

export default { 
    components:{ 
     Child 
    }, 
    data(){ 
     return { 
      title: "", 
      subtitle: "", 
      description: "" 
     }; 
    }, 
    methods: { 
     way1(){ 
      this.title="way 1 title"; 
      this.subtitle="way 1 subtitle" 
      this.description="way 1 description" 
     }, 
     way2(){ 
      this.title="way 2 title"; 
      this.subtitle="way 2 subtitle" 
      this.description="way 2 description" 
     } 
    } 
} 
</script> 

EDIT： 私もお勧め取得するための任意のロジックを持つことができますParent.vueに "データ・プロバイダー" をインポートしたいですデータを返すが、それはそれを子コンポーネントに簡単に渡すことができる既知の形で返すということになるだろう。

Parent2.vue

<template> 
    <div> 
     <button @click="get">Get</button> 
     <child :title="title" :subtitle="subtitle" :description="description"></child> 
    </div> 
</template> 

<script> 
import dataProvider from "./dataProvider" 
import Child from "./Child.vue" 

export default { 
    components:{ 
     Child 
    }, 
    data(){ 
     return { 
      title: "", 
      subtitle: "", 
      description: "" 
     }; 
    }, 
    methods: { 
     get(){ 
      var data = dataProvider.get(); 
      this.title=data.title; 
      this.subtitle=data.subtitle; 
      this.description=data.description; 
     } 
    } 
} 
</script>