使用此逻辑构建 VueJS 应用程序的最有效方法是什么?
What would be the most efficient way to structure a VueJS app with this logic?
我有一个应用程序可以根据条件显示从一系列来源获取的数据。问题是我获取、组织和 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>
这与 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
我可能会将模板制作成自己的组件,该组件采用标题、副标题和描述的道具。然后 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>
我有一个应用程序可以根据条件显示从一系列来源获取的数据。问题是我获取、组织和 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>
这与 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
我可能会将模板制作成自己的组件,该组件采用标题、副标题和描述的道具。然后 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>