@paper_castle
Фрилансер

Как правильно передать данные с сервера в SPA, не прибегая к реализации API?

Принято решение переписать часть существующего сервиса как с vuejs для большей гибкости + заодно избавиться от лапши из JQuery. Но страницы не будут целиком как SPA, лишь часть будет задействована как корневой элемент.
В связи с этим вопрос - как правильнее вывести уже существующие данные для vue?
1. Как и раньше - шаблонизатором просто в разметку/атрибуты? Сейчас примерно так и есть, но хотелось бы избавиться от этого. Всегда отвращали эти конструкции в стиле
let appFrontData = '<?=$someServerVarHere ?>';
2. Не загружать данные для корневого элемента, завести отдельный API-url, который будет отдавать те же данные в JSON и загружать axios при инициализации vue.
Выглядит неплохо, но придется дублировать часть функционала для реализации мини-API-эндпоинтов частей для нескольких страниц.
3. ... Еще варианты?
  • Вопрос задан
  • 99 просмотров
Решения вопроса 2
@Kostik_1993
Fullstack Web Developer | PHP | Laravel | Vue.js
let appFrontData = '<?=$someServerVarHere ?>';

Гы! А вы думали что в идеальном варианте должны быть единорожки вместо этого?) Три варианта у вас есть и не более.

1) Глобальная переменная. Кстати если вы посмотрите реализацию Nuxt.js/Next.js фреймворков, там как раз используется этот как единственный возможный.
2) Передача в компонент через props
<ComponentName :data='<?=$someServerVarHere ?>'/>
3) Загрузка из компонена

Других вариантов не существует
Ответ написан
Kozack
@Kozack Куратор тега Vue.js
Thinking about a11y
"Правильного" ответа тут не будет. Многое зависит от вашего конкретного случая, от того как построен Бекенд.
Второй вариант выглядит предпочтительнее, если говорить про концепцию SPA. Один из плюсов такой архитектуры в том, что логика работы и данные разделены. То есть всю реализацию (html/css/js) можно один раз отдать на клиент и кэшировать там на максимально длинный срок. И подгружать только недостающие данные для отображения. (И axios вам вероятно даже не нужен).
С другой стороны, если речь идёт про какой-то сравнительно небольшой элемент который может и не понадобится пользователю, тогда, скорее всего это будет излишне.

Вот вам совет: вынесите логику загрузки данных в отдельный модуль. Спрячьте за условной функцией loadData(). Чтобы вы в любой момент могли изменить способ загрузки. Это может быть как сетевой запрос
function loadData() {
  return fetch(' ... ')
}

Или заранее вставленные данные
function loadData() {
  return document.querySelector('#json-data').textContent
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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