Question

我有一个应用程序，它将显示从一系列来源获取的数据，具体取决于条件。问题是我获取，组织和返回数据的方式因原始源而异（我甚至只需为一个方法导入其他库）。

我目前的设置与下面的示例类似，但是当我的源列表增长到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]();

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

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>

编辑：我还建议将一个“数据提供者”导入到Parent.vue中，该数据提供者可以拥有获取数据的任何逻辑，但期望是它以已知的形状返回它，然后可以很容易地将其传递给子组件< / p>

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应用程序的最有效方法是什么？

2 个答案: