Как постепенно внедрять vue.js?

Question

[IgorVol]

Собираюсь постепенно внедрять vuejs в большой проект. Сразу все внедрить - долго и сложно. Читал, что vue/react библиотеки для этого удобны и хороши, но как правильно внедрять?

Допустим, есть логический блок topbar. Я его описывают в компонентах, подключаю vue и он отрисовывается уже на стороне браузера. Так, компонент за компонентом я могу постепенно заменить весь серверные рендеринг на vue компоненты.

А как быть с аяксами? Сейчас такие вещи, как подгрузка комментариев - это аякс запрос, где сервер возвращает js, дорисовывающий комментарии. Как тут быть? Какой путь выбрать:
1. Аяксом возвращать js на подобии app.comments.push({}) а vue своей реактивностью сам все пере-рендерит.
2. Использовать плагин vue для выполнения запросов REST на бекенд, а на бекенде отдавать только данные в json

Технически можно и так и так. А как правильно делается в современном мире?

Answer 1

[Evgeny Kulakov]

Стандартный подход - вы передаете данные, данные попадают в компоненты, которые их соответствующим образом отображают.

Comments

[IgorVol]

Т.е. сервер отдает json, а все остальное происходит во vue?

[Evgeny Kulakov]

Так строятся традиционные спа приложения. Если вам нужно что-то в плане сео, то делайте частичный рендер на стороне сервера, который сможет проиндексировать робот.

Answer 2

[Алексей Черемисин]

С аяксами достаточно просто, я использую библиотеку axios.js.
Я сейчас тоже перевожу свой проект на vue, постепенно его изучая. Все, что можно, отдается по ajax, все что должно быть в рамках SEO, отдается со стороны сервера, со стороны vue, использую привязку к модели или вызовы по v-click и подобным. Для какого-то интерактива, использую пользовательские директивы. Например кастомная директива связывает конкретный товар из списка товаров с его показом, если он есть в корзине, которая загружается по аякс. В общем, сначала ломал себе мозг, как связать список товаров на странице с корзиной, вот нашел очень хорошее решение -пользовательская директива, и для СЕО хорошо, и интерактивно в обе стороны, и с элементом можно творить все что угодно.
Сейчас делаю пользовательскую директиву, которая подменяет href в ссылках пагинации, на параметры фильтров, которые рисуются через компоненты vue.

Comments

[IgorVol]

А почему не используете традиционный https://github.com/pagekit/vue-resource вместо axios.js?

[Алексей Черемисин]

IgorVol: о! Даже не знал! Посмотрел, все равно не аксиос останусь, у него есть catch, который необязательный, и есть config, который очень удобен.
Я когда только начинал, почему-то сразу аксиос на глаза попался.

[ajaxtelamonid]

IgorVol: В ноябре прошлого года автор Vue отозвал у vue-resource звание официальной либы для запросов и порекомендовал юзать axios: https://medium.com/the-vue-point/retiring-vue-reso...

Хотя, конечно, что юзать - разницы никакой, дело вкуса.

Answer 3

[ajaxtelamonid]

Переводить сайт на vue можно по частям, я бы даже сказал, что нужно по частям. В большинстве случаев нет смысла делать чисто одностраничную SPA с одним глобальным vue-приложением - проблемы с индексацией поисковиками, другой непривычный UX для пользователей, вот это всё. Выделите места, где нужна активная интерактивность и их сделайте в виде приложений vue. Начальные данные можно получать не аяксом, кстати, а помещать при генерации страницы на бэкенде в глобальную переменную window и потом в приложении vue их оттуда забирать в beforeMount(). Пример можно посмотреть здесь в readme: https://github.com/spatie/laravel-blade-javascript... . В этом случае пользователь будет избавлен от необходимости после загрузки страницы смотреть на индикатор загрузки данных аяксом.

А при аякс-запросах, конечно, надо делать вариант 2. Пот бэкенда только json, никаких скриптов - запутаетесь. Также заранее ознакомьтесь, зачем полезно нормализовывать данные для хранения на клиенте, когда-нибудь точно пригодится - https://habrahabr.ru/post/332628/ , https://github.com/paularmstrong/normalizr

vuex, кстати, использовать можно только если у вас есть зависимые друг от друга приложения (например, приложением сделан сайдбар, где должны меняться числа после действий пользователей). Если такого не нужно, то можно обойтись и без него.