Question

在我的vue项目中，我有一个将通过ajax请求加载数据的组件。视图页面将使用此组件3次，并且请求参数和结果完全相同。我希望ajax请求仅被调用1次。最佳做法是什么？我知道使用vuex存储或会话存储将ajax结果保存在组件中可以做到，但是还有什么更好的主意吗？

jsfiddle链接：jsfiddle.net/cqli/5g7anu0f/37

模板：

$lte

组件定义：

<div id="app">
    <show-title></show-title>
    <show-title></show-title>
    <show-title></show-title>
</div>

Answer 1

它们将是相同的，因为您使用相同的数据调用URL：id = 1。您需要为组件使用道具：

Vue.component('show-title', {
    props: ['id'], // here you defined props
    mounted(){
    fetch('https://jsonplaceholder.typicode.com/todos/'+this.id) // here you fetch todo with ID from props.
    .then(response => response.json())
    .then(json => this.title = json.title);
  },
    data: function () {
    return {
      title: "hello world!"
    }
  },
  template:"<h3>{{title}}</h3>"
});

在模板中添加:id：

<show-title :id="1"></show-title>
<show-title :id="2"></show-title>
<show-title :id="3"></show-title>

如何一次调用ajax请求以在多个组件实例中加载数据

1 个答案: