Как инициализировать VUE компонет?

Question

[Antonio Solo]

Хочу использовать VUE на страницах сайта, компонент требует достаточно много данных из базы данных, причем на каждой странице это свои данные.

Как правильно построить инициализацию начального состояния компонента , без использования ajax запросов ?

Comments

[shmatuan]

Серверный рендеринг ещё можно на nuxt

[Antonio Solo]

shmatuan, пока что серверный рендинг это перебор.

Answer 1

[Александр Дроздов]

Ну по сути тут описан подход с window.__INITIAL_STATE__, в эту переменную с сервера суешь json готовенький, и потом его подсовываешь состоянию своему
https://ssr.vuejs.org/ru/guide/data.html

Answer 2

[Александр Логинов-Солоницын]

Просто покажу пример при использовании PHP, как можно получить начальные данные без аякса.

<?php
$data = json_decode(['name' => 'John']);
?>
<div id="simple-component">
  <simple-component :data-state='<?php echo json_encode($data)?>'></simple-component>
</div>

Vue.component('simple-component', {
  template: '<div>{{state.name}}</div>',
  props: {
    dataState: {
      type: Object,
      required: true
    },
  data() {
    return {
      state: this.dataState
    };
  }
}
})
new Vue({
  el: '#simple-component',
})

Answer 3

[Alex]

Ну, обычно инициализируете данные по умолчаию, возможно добавляете состояние прелоадера, а когда ваши данные из БД (или ещё откуда) придут — заменяете

{
  template: `
    <div>
      <preloader v-if="!pageData" />
      <div v-else >
        ...
      </div>
    </div>
  `,

  data() {
    return {
      pageData: null
    }
  },

  async mounted() {
    this.pageData = await getData()
  }
}

Comments

[Вадим]

А почему не created-хук, ведь DOM для получения данных не нужен?