как вызвать ajax-запрос один раз для загрузки данных в нескольких экземплярах компонентов

Question

В моем проекте vue у меня есть компонент, который будет загружать данные через ajax-запрос.Страница просмотра будет использовать этот компонент 3 раза, и параметры запроса и результат будут полностью одинаковыми.Я хочу, чтобы запрос ajax вызывался только 1 раз.какая лучшая практика?Я понимаю, использовать хранилище vuex или хранилище сеансов, чтобы сохранить результат ajax в компоненте, может сделать это, но есть ли идея лучше?

ссылка jsfiddle: jsfiddle.net / cqli / 5g7anu0f / 37

Шаблон:

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

Определение компонента:

    Vue.component('show-title', {
        mounted(){
        fetch('https://jsonplaceholder.typicode.com/todos/1')
        .then(response => response.json())
        .then(json => this.title = json.title);
      },
        data: function () {
        return {
          title: "hello world!"
        }
      },
      template:"<h3>{{title}}</h3>"
    });
    new Vue({
      el: "#app",
      data: {
      },
      methods: {
      }
    })

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>