Как реализуется SPA-приложение, на примере Vue.js?

Добрый день/вечер, уважаемые знатоки! У меня образовалось куча вопросов по поводу SPA... Если кто сможет ответить, буду очень благодарен!
1) Vue.js существует для того, чтобы в интерактивном режиме(без перезагрузки страницы) отображать изменившиеся элементы на странице, верно?
2) Я почитал про Nuxt.js, но так и не понял того, для чего он нужен... как я понимаю, Nuxt.js существует для того, чтобы писать масштабные проекты, верно?
3) Генерация страницы на стороне сервера... то-есть, клиенту отдается не все приложение, а только его часть, верно? А если клиент переходит на какой-то другой элемент(страницу), то данные для этой страницы идут с сервера, да?
4) На сколько я понимаю, всю вот эту генерацию (обращаясь к 3 пункту) можно производить на серваке (Node.js), верно?
5) Каким образом происходит взаимодействие Vue.js с серверной частью? Точно таким же образом, как и на PHP, да?
6) Для чего нужен Vuex?
Извините за столь глупые вопросы... Спасибо!
  • Вопрос задан
  • 9121 просмотр
Решения вопроса 2
@game802 Автор вопроса
Дали ответ на другом ресурсе, может быть кому пригодится:
1. Да, на нем пишут как простые штуки таки и полноценные SPA, навигация работает без презагрузки.
2. Nuxt js это сборка (VueJS + VueRouter и т.д.) которая делает Рендеринг SPA приложения на стороне сервера. Зачем он это делает? - все очень просто. SPA приложения неиндексируются поисковыми ботами из-за своей асинхронности и JS, NuxtJS решает эту проблему, делая рендер на стороне сервера (выполняет все асинхронные действия например запрос к бекенду по REST, и возвращает отрендеренный HTML)
3. SSR (серверный рендеринг), генерирует ту страницу которую запросил пользователь например: example.ru/item/12, в данном случае SSR спросит у бэкенда Item с id = 12 , и затем сгенерирует и вернет клиенту HTML. В конце HTML документа всегда подключен файл вашего SPA приложения, который исполнится и включит реактивность. Т.е. Получается что первый запрос к сереверу это отрендеренный SSR, а все остальные переходы по приложению это уже SPA
4. Да, просто ставите NuxtJS и наслаждаетесь разработкой.
5. Взаимодействует через REST, делая GET|POST запросы на ваш бекенд. Либо через socket. Используйте laravel 5 как бэкенд
6. Vuex это централизованное хранилище данных. предназначено для того чтобы жёстко отделять данные от view. Все данные хранятся в едином экземпляре, и если происходит set (мутация) для какого-либо значения в хранилище, то во всех местах где был get этого значения, произойдёт обновление.
Этим обеспечивается реактивность, сайт перестаёт быть просто страницей. Он если хотите "обретает душу"

Иногда в простых админках я создаю всего один основной action который делает т.н. getAllState, т.е. Берет все состояние относительно пользователя у бекенда. Например берет объекты user, comments, posts. Billing, messages и пишет это в хранилище.
И когда мне надо обновить данные, я опять вызываю getAllState который обновит хранилище, в это время автоматически вызовется цепочка геттеров/сеттеров и вот тут сработает магия vue. Он сравнит текущий отрендеренный DOM с Новым Virtual DOM. И если где то будут различия он перерендерит этот кусок.

Очень сложно объяснять это. Надеюсь я смог донести хоть частичку всей концепции.
Думаю про доки говорить не стоит. Ведь все что сказано выше там написано в более подробной форме)

Автор: Евгений Рюмин
Ответ написан
@Barmunk
На laravel есть реализация SPA приложения, можете его изучить, как раз собрано все, что вас интересует

https://github.com/codecasts/spa-starter-kit

Client side
Vue.js 2.0 project create with vue-cli + webpack template
Centralized state management with Vuex
Route management with Vue-router
Authentication with JWT
Keep user signed in using local stored info
HTTP requests with Axios
ESLint with AirBNB preset
Pagination integrated with Laravel's LengthAwarePaginator
Alerts and Confirmation Alerts provided by SweetAlert

Server side
Laravel 5.3
Authentication with JWT
Fractal
Web service RESTful with Dingo (planned)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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