solotony
@solotony
покоряю пик Балмера

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

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

Как правильно построить инициализацию начального состояния компонента , без использования ajax запросов ?
  • Вопрос задан
  • 889 просмотров
Решения вопроса 2
@bagzon
Backend PHP, NodeJs, JS
Ну по сути тут описан подход с window.__INITIAL_STATE__, в эту переменную с сервера суешь json готовенький, и потом его подсовываешь состоянию своему
https://ssr.vuejs.org/ru/guide/data.html
Ответ написан
Комментировать
kasheibess
@kasheibess
веб уже не тот
Просто покажу пример при использовании 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',
})
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack Куратор тега Vue.js
Thinking about a11y
Ну, обычно инициализируете данные по умолчаию, возможно добавляете состояние прелоадера, а когда ваши данные из БД (или ещё откуда) придут — заменяете
{
  template: `
    <div>
      <preloader v-if="!pageData" />
      <div v-else >
        ...
      </div>
    </div>
  `,

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

  async mounted() {
    this.pageData = await getData()
  }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы