使用此逻辑构建 VueJS 应用程序的最有效方法是什么？

Question

我有一个应用程序可以根据条件显示从一系列来源获取的数据。问题是我获取、组织和 return 数据的方式因原始来源而异（我什至不得不为一种方法导入其他库）。

我目前的设置如下例所示，但是当我的来源列表增长到例如 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];

更新： 你说你有多个函数，它们都以不同的方式获取数据，你可以通过将函数放入数组并为它们建立索引来执行相同的方法。

// 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]();

此外，如果您的方法依赖于特定的上下文，您可以使用 call() 来提供不同于 this 的特定上下文。

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

Answer 2

我可能会将模板制作成自己的组件，该组件采用标题、副标题和描述的道具。然后 parent 组件将负责根据它获取数据的方式将数据传递到此 child 组件。

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>

编辑：我还建议将 "data provider" 导入到 Parent.vue 中，后者可以具有获取数据的任何逻辑，但期望它 returns 以已知的形状存在，然后可以轻松地被传递到 child 组件

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>

使用此逻辑构建 VueJS 应用程序的最有效方法是什么？

What would be the most efficient way to structure a VueJS app with this logic?

javascript

vue.js

vue-component