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

    @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. И если где то будут различия он перерендерит этот кусок.

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

    Автор: Евгений Рюмин
    Ответ написан
    4 комментария