Я работал над проектом, использующим Vue.js в Rails, и это было весело, но чертовски сложно. Не потому, что это сложно, а потому, что я промежуточный пользователь в обоих фреймворках, поэтому отладка была такой увлекательной!
В любом случае, я надеюсь, что смогу помочь другим и выпустить несколько быстрых руководств, чтобы помочь этим родственным душам.
Итак, давайте посмотрим на передачу данных в ваш экземпляр Vue из вашего представления Rails.
Сначала спросим: почему?
В приложении, которое я создаю, я использую различные технологии. Я использую Rails для всех api, а также для создания в основном статических маркетинговых страниц и для облегчения своей жизни, сохраняя все представления аутентификации Devise в Rails. Я мог бы потратить время, чтобы перестроить его в vue и настроить несколько сообщений и файлов ajax, но зачем? Выгода не стоит того, чего бы она стоила моему клиенту прямо сейчас.
Чтобы эти страницы загружались как можно быстрее, я придерживаюсь Turbolinks, которые с виртуальным DOM могут вызвать некоторые проблемы.
И, очевидно, я использую Vue.js для более «прикладной» и UX-стороны вещей.
В некоторых частях сайта я делаю http-запрос через Axios и создаю списки, показываю представления и т. Д. Через Vue Router и параметры url в Vue Router (это уже отдельный учебник). НО… На другой странице имело смысл передать данные, отправленные из контроллера в представление, прямо в соответствующий экземпляр Vue без выполнения каких-либо HTTP-запросов.
Итак, ответ на вопрос, почему, заключается в том, что он работает для того, что мне нужно делать в данном конкретном случае. Я не думаю, что для полноценного SPA, созданного только в сборке Rails-Api, это будет иметь наибольший смысл, но если вы живете в обоих, потому что это экономит вам и вашему клиенту время. Тогда это все, что вам нужно.
Получение данных
Давай избавимся от этого. Мы предполагаем, что вы нашли какую-то запись в своем контроллере и хотите отправить эту переменную экземпляра в свое представление.
Вот так:
Прохладный. Мы используем находчивые маршруты Rails в сочетании с нашей моделью Contact. Находчивый маршрут предоставляет путь «редактирования», который ищет этот шаблон: «contacts /: id / edit /».
Из Контроллера в нашем действии «редактировать», которое мы определили, мы просто находим этот «Контакт» на основе параметра «: id», отправленного в URL-адресе. Всем этим занимаются ребята из Rails, нам не нужно делать никаких HTTP-запросов на получение в экземпляре Vue, чтобы получить то, что нам нужно, Rails делает всю работу! Так что давайте воспользуемся этим!
Подготовка данных
Затем нам нужно как-то прикрепить этот «@contact» и все связанные с ним свойства в наш экземпляр Vue… из представления.
Давайте быстро предположим, что мы работаем с "views / contacts / edit.html.erb", поскольку с тех пор это дает максимум пользы.
Во-вторых, убедитесь, что вы включили в свой макет «тег пакета javascript». Мы могли бы просто включить его в это представление, но я считаю, что производительность лучше, когда он включен на каждую страницу, но не бойтесь, просто потому, что у нас есть `` тег пакета '', это не означает, что мы инициализируем этот экземпляр Vue. на каждой странице.
<%= javascript_pack_tag 'contacts/main.js'%>
В-третьих, давайте применим то, что команда Rails уже предоставила нам в своей документации (https://github.com/rails/webpacker).
Это выглядит так:
По сути, мы берем данные и конвертируем их в JSON с помощью этого небольшого метода «.to_json». После безопасного форматирования в JSON мы передаем атрибут данных элемента, к которому будет монтироваться экземпляр Vue. Имейте в виду, что после того, как Vue Renders выполнит рендеринг, элемент будет заменен, поэтому в исходном коде у вас не будет этого беспорядочного / небрежного объекта JSON.
Отлично, поэтому данные были переданы в наше представление Rails, в котором определен элемент, к которому будет подключаться экземпляр Vue, а также атрибут данных, заполненный JSON из найденной записи, которую мы получили от нашего соответствующего контроллера.
Теперь давайте посмотрим на корневой экземпляр Vue.
Переваривание данных
Я все еще разбираюсь в структуре приложения. «Как лучше всего структурировать ваше приложение?» - спросите вы, и черт побери. Что я действительно знаю, так это то, что мне нравятся шаблоны и вещи, которые имеют смысл. Так вот, я структурирую свой каталог «packs» как каталог «app / views». Для меня это имеет смысл.
Таким образом, в «javascript / packs / contacts / main.js» следует включить следующий бит, и это файл, который вы должны включить в качестве «тега пакета javascript», упомянутого выше.
Ваш файл должен выглядеть так:
Там много заметок, из-за которых это выглядит довольно сумасшедшим, но на самом деле это не так уж и плохо.
Видите, намного лучше, но заметки важны.
В ореховой скорлупе мы:
- Оберните наш экземпляр Vue в eventListener для "turbolinks: load".
- Убедитесь, что элемент, к которому будет монтироваться экземпляр, присутствует.
- Проанализируйте данные из атрибута данных соответствующего монтируемого элемента.
- Инициализируйте экземпляр только в том случае, если присутствуют и element, и props, потому что, если бы их не было, приложение было бы бессмысленным, и вы бы получили ошибки и ничего хорошего.
- Передайте вновь созданную константу «props» в экземпляр через «render».
[Примечание]: важно проверить не только крепежный элемент, но и ПРОПОРЫ. Turbolinks доставлял мне такую хрень, потому что страница загружалась, находила div в предварительном просмотре, а экземпляр vue отображал, и все это до того, как реквизиты были проанализированы и отправлены. Это сработало бы, если бы я нажал на ссылку напрямую, но не если бы я просматривал ссылки и навигацию.
Итак, если ваше приложение зависит от реквизита, вы должны убедиться, что реквизиты присутствуют, перед его рендерингом.
Использование данных
В тот момент, которого вы ждали, вы буквально не могли забыть ни о чем другом, вы просто хотите посмотреть, как использовать чертовы реквизиты, так что без дальнейших прощаний.
На этом этапе мы просто определяем свойства, которые хотим использовать в нашем шаблоне index.vue, как и любые другие свойства, и у нас есть к ним доступ.
… И все.
Что ж, парни и девушки, здесь особо нечего сказать, кроме того, что я потратил на эту статью больше времени, чем, вероятно, нужно. Если это сэкономит вам час или избавит вас от разочарования или сердечной боли, то оно того стоит.
Если это вообще было полезно, если у меня есть опечатки или я мог бы написать это лучше, пожалуйста, не бойтесь обращаться к нам!
