Начало работы с Nuxt

Веб-разработчики создают множество одностраничных приложений, используя фреймворки JavaScript (Angular, React, Vue). SPA динамически заполняют содержимое своих страниц при загрузке , что означает, что к тому времени, когда Google сканирует их сайт, важный контент еще не добавлен на сайт. Частично эту проблему можно решить путем предварительного рендеринга содержимого вашего приложения. Именно здесь вступают в действие серверные приложения, и для разработчиков Vuejs мы можем создавать серверные приложения с помощью Nuxt.js.

Мы предполагаем, что вы не использовали его раньше, поэтому он начнется с нуля — познакомит вас с Nuxt.js, его файловой структурой и принципами работы маршрутизации. А также коснемся того, как заставить его работать с Vuex.

В конце этого руководства вы сможете приступить к созданию базовых веб-приложений в Nuxt.js, и если вам интересно, как начать работу с Nuxt.js, это будет справедливо.

Эта статья предназначена для тех, кто хорошо знаком с Vue.js, и это концепция. Для тех, кто не знаком с Vue.js, рассмотрите возможность начать с официальной документации Vuejs и плейлиста The Net Ninja Vuejs.

Что такое Nuxt.js?

Согласно их официальной странице:

«Nuxt — это прогрессивный фреймворк на основе Vue.js для создания современных веб-приложений. Он основан на официальных библиотеках Vue.js (vue, vue-router и vuex) и мощных инструментах разработки (webpack, Babel и PostCSS). Цель Nuxt — сделать веб-разработку мощной и производительной с учетом большого опыта разработчиков».

Он позволяет создавать три типа приложений в зависимости от цели, для которой он предназначен:

1. Статические сгенерированные страницы (пре-рендеринг)
   Статические сгенерированные приложения не требуют запросов API для извлечения содержимого страниц, т. е. содержимое уже включено в файл HTML. Примером статического сайта является сайт-портфолио или целевая страница продукта.

2. Одностраничное приложение
   Большинство фреймворков JavaScript (React, Angular, Emberjs, Vue и т. д.) представляют собой одностраничные приложения, содержимое которых динамически заполняется с более быстрыми переходами. Большинство SPA используют API истории HTML5 или хэш местоположения для маршрутизации.

3. Приложения с визуализацией на стороне сервера (SSR)
   Рендеринг на стороне сервера — это метод, используемый для извлечения и отображения данных на стороне клиента на сервере для отправки клиенту полностью обработанной страницы. Это хороший подход для получения хорошего SEO для вашего приложения.

Создание вашего первого приложения Nuxt.js

Вы можете создать приложение Nuxt.js двумя способами:

1. С помощью инструмента create-nuxt-app .
2. С нуля.

Если вы просто хотите увидеть готовое приложение, которое мы будем создавать, вот ссылка на репозиторий GitHub.

В этом руководстве мы сосредоточимся на использовании create-nuxt-app так что давайте начнем. Если у вас установлен npx, откройте терминал и выполните следующую команду:

 $ npx create-nuxt-app nuxt-tutorial-app

или

 $ yarn create nuxt-app nuxt-tutorial-app

Для целей этого руководства nuxt-tutorial-app — это название приложения, но не стесняйтесь называть свое приложение по-другому.

За этим следует список параметров, которые помогают настроить ваше приложение с учетом того, что вам может понадобиться для разработки.

Вот как выглядит моя конфигурация:

Для целей этого руководства нам не нужны конфигурации axios, linting и Prettier.

Как только это будет сделано, мы запустим следующую команду в нашем терминале:

 $ cd nuxt-tutorial-app $ npm run dev

Теперь ваше приложение должно работать на https://localhost:3000, и вот что вы должны увидеть:

На этом этапе ваше приложение готово к разработке.

Понимание структуры папок Nuxt

Создание шаблона приложения, как мы это делали, создает разные файлы и папки, с которыми мы можем начать работать. Для тех, кто раньше не работал с Nuxt, это может вывести вас из равновесия. Итак, мы рассмотрим папки, чтобы понять их важность.

• Ресурсы
  Эта папка предназначена для нескомпилированных файлов, таких как изображения, файлы шрифтов, файлы SASS, LESS или JavaScript. Давайте добавим, создадим папку styles и файл main.css , скопируем и вставим в него следующее.

 a { text-decoration: none; color: inherit; cursor: pointer; } .header { width: 100%; max-width: 500px; margin-left: auto; margin-right: auto; height: 60px; top: 0; position: sticky; background-color: #fff; display: flex; justify-content: space-between; align-items: center; } .logo { width: 40%; max-width: 200px; height: 40px; } .logo .NuxtLogo { max-width: 30px; margin-left: 10px; max-height: 40px; } .nav { width: 60%; height: 40px; display: flex; justify-content: space-between; padding-right: 10px; max-width: 300px; } .nav__link { width: 80px; display: flex; align-items: center; border-radius: 4px; justify-content: center; height: 100%; border: 1px solid #00c58e; cursor: pointer; } .nav__link:active { background-color: #00c58e; border: 1px solid #00c58e; color: #fff; box-shadow: 5px 3px 5px 2px #3f41468c; } .home { padding-top: 30px; } .home__heading { text-align: center; } .directories { display: flex; box-sizing: border-box; padding: 10px; max-width: 1000px; margin: 0 auto; flex-wrap: wrap; justify-content: center; } @media (min-width: 768px) { .directories { justify-content: space-between; } } .directory__container { width: 100%; max-width: 220px; cursor: pointer; border-radius: 4px; border: 1px solid #00c58e; display: flex; height: 60px; margin: 10px 5px; margin-right: 0; justify-content: center; align-items: center; } .directory__name { text-align: center; } .directory { width: 100%; margin: 50px auto; max-width: 450px; border-radius: 4px; border: 1px solid #00c58e; box-sizing: border-box; padding: 10px 0; } .directory__info { padding-left: 10px; line-height: 22px; padding-right: 10px; }

Приведенные выше стили будут использоваться во всем приложении для того, что мы будем создавать. Как видите, у нас есть стили для навигации и других аспектов, которые мы будем подключать к приложению по мере продвижения.

• Компоненты
  Эта папка знакома нам по Vue.js, она содержит повторно используемые компоненты.

Теперь давайте создадим наш первый компонент и назовем его navBar.vue и добавим к нему следующий код. Мы хотим, чтобы на панели навигации сайта отображался логотип и ссылка на страницы «Главная» и «О нас», которые мы создадим в будущем. Эта панель навигации будет видна во всем приложении. Он также будет использовать некоторые стили, которые мы добавили выше.

 <template> <header class="header"> <div class="logo"> <nuxt-link to="/"> <Logo /> </nuxt-link> </div> <nav class="nav"> <div class="nav__link"> <nuxt-link to="/">Home</nuxt-link> </div> <div class="nav__link"> <nuxt-link to="/About">About</nuxt-link> </div> </nav> </header> </template> <script> import Logo from "@/components/Logo"; export default { name: "nav-bar", components: { Logo } }; </script> <style> </style>

Раздел шаблона содержит то, что будет видно пользователю. У нас есть элемент header , который содержит наш логотип и навигационные ссылки. Для ссылки на страницы мы используем nuxt-link , который обеспечивает навигацию между страницами компонентов.

В разделе сценария мы импортируем компонент logo , используя псевдоним Nuxt @ , и объявляем его в нашем компоненте для использования, добавляя его как компонент. Это позволяет нам отображать его в шаблоне.

• Макет
  Здесь мы будем хранить макеты наших приложений. Это особенно полезно, если дизайн вашего приложения требует двух или более макетов, например, один для аутентифицированных пользователей, а другой для гостей или администраторов. Для целей этого урока мы будем придерживаться макета по умолчанию.
  

Давайте откроем наш файл default.vue и добавим наш компонент navBar в макет нашего приложения.

 <template> <div> <Nav /> <nuxt /> </div> </template> <script> import Nav from "~/components/navBar.vue"; export default { components: { Nav } }; </script>

В разделе шаблонов мы добавили наш компонент Nav внутри контейнера макета, чтобы он всегда отображался вверху после его импорта в файл и объявления в разделе сценария.

Следующим после нашего компонента Nav является <nuxt /> , который сообщает Nuxt, где отображать все его маршруты.

Этот компонент Nav — тот, который мы создали выше. Если добавить его сюда, компонент Nav будет использоваться во всем приложении.

• ПО промежуточного слоя
  Эта папка была создана для размещения файлов JavaScript, которые необходимо запустить перед отображением страниц. Если вы когда-либо использовали навигационную защиту Vuejs, эта папка была создана для таких файлов.

• Страницы
  Это еще одна папка, с которой разработчики с опытом работы с Vuejs не знакомы. Он работает таким образом, что каждый файл *.vue создается как маршрут в вашем приложении, поэтому он одновременно служит и представлением , и папкой маршрутизатора , мы поговорим об этом подробнее в следующем разделе.

• Плагины
  Здесь вы храните файлы, которые хотите запустить перед монтированием корневого приложения Vue.js. Это не обязательная папка, поэтому ее можно удалить.

• nuxt.config.js
  Этот файл используется для настройки вашего приложения, обычно он предварительно заполняется на основе конфигурации при создании вашего приложения. Идеальный файл nuxt.config.js по умолчанию должен выглядеть так:

 export default { mode: 'universal', /* ** Headers of the page */ head: { title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, /* ** Customize the progress-bar color */ loading: { color: '#fff' }, /* ** Global CSS */ css: [ ], /* ** Plugins to load before mounting the App */ plugins: [ ], /* ** Nuxt.js dev-modules */ buildModules: [ ], /* ** Nuxt.js modules */ modules: [ ], /* ** Build configuration */ build: { /* ** You can extend webpack config here */ extend (config, ctx) { } } }

Каждый раз, когда в этот файл вносятся изменения, ваше приложение будет автоматически перезапускаться, чтобы отразить изменения. Давайте рассмотрим, что означают свойства, используемые в файле.

• Режим
  Тип приложения; либо universal , либо spa . Выбирая универсальный, вы сообщаете Nuxt, что хотите, чтобы ваше приложение могло работать как на стороне сервера, так и на стороне клиента.
• Голова
  Все свойства метатегов по умолчанию и ссылка на фавикон, находящиеся внутри тега head в вашем приложении, находятся здесь. Это связано с тем, что в Nuxt.js нет файла index.html по умолчанию, в отличие от Vue.js.
• загрузка
  Все приложения Nuxt поставляются с компонентом загрузчика по умолчанию, и здесь можно настроить color .
• css
  Ожидается, что вы введете ссылку на все свои глобальные файлы CSS, чтобы ваше приложение могло учитывать ее при монтировании приложения. Мы собираемся добавить сюда ссылку на наш файл css и перезапустить наше приложение.
  

 /* ** Global CSS */ css: ["~/assets/styles/main.css"]

• плагины
  Здесь вы подключаете все плагины в папке плагинов к приложению. Он принимает объект со свойствами, такими как src , который принимает путь к файлу плагина и mode , который настраивает, как ваше приложение обрабатывает такой плагин; либо в качестве плагина на стороне сервера, либо в качестве плагина на стороне клиента. Например:

 { src: '~/plugins/universal-plugin.js' }, // for server and client plugins { src: '~/plugins/client-side.js', mode: 'client' }, // for client only plugins { src: '~/plugins/server-side.js', mode: 'server' }, // for server side only plugins

Это важно, чтобы избежать ошибок как на стороне сервера, так и на стороне клиента, особенно если вашему плагину требуется что-то вроде localStorage , которое недоступно на стороне сервера.

Для получения дополнительной информации о файле nuxt.config.js ознакомьтесь с официальным документом.

Nuxt Pages и система маршрутизации

Папка страниц в вашем приложении Nuxt используется для настройки маршрутов вашего приложения, т. е. имя вашего маршрута зависит от имени каждого файла в этой папке, например, если у вас есть файл about.vue внутри файла страниц, это означает, что теперь у вас есть маршрут /about в вашем приложении, но это еще не все. Что произойдет, если вам нужен динамический маршрут для вашего приложения? Или вложенный маршрут? Как вы это делаете? Давайте узнаем.

Основные маршруты

Базовые маршруты можно отнести к маршрутам, для работы которых не требуется дополнительная настройка. Например, прямой маршрут /work или маршрут /contact . Итак, если папка ваших страниц выглядит так:

 pages/ --| me/ -----| index.vue -----| about.vue --| work.vue --| contact.vue --| index.vue

Nuxt автоматически сгенерирует конфигурацию маршрутизатора, которая выглядит следующим образом:

 router: { routes: [ { name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'work', path: '/work', component: 'pages/work' }, { name: 'contact', path: '/contact', component: 'pages/contact' }, { name: 'me', path: '/me', component: 'pages/me/index.vue' }, { name: 'me-about', path: '/me/about', component: 'pages/me/about.vue' } ] }

Затем эти пути можно использовать для доступа к связанным с ними компонентам. Вы можете видеть, что путь не содержит pages . А Nuxt обрабатывает компоненты с именем index.vue как положено, без дополнительной настройки для этого.

Вложенные маршруты

Чтобы создать вложенный маршрут, создайте папку с именем Dashboard внутри папки pages . Эта папка должна содержать все файлы, которые вы хотите вложить в нее. Например, user.vue и settings.vue . Затем в корне папки страниц создайте файл с именем dashboard.vue .

 pages/ --| me/ -----| index.vue -----| about.vue --| dashboard/ -----| user.vue -----| settings.vue --| dashboard.vue --| work.vue --| contact.vue --| index.vue

Это автоматически сгенерирует маршрутизатор с маршрутами, которые выглядят следующим образом:

 router: { routes: [ { name: 'index', path: '/', component: 'pages/index.vue' }, { name: 'work', path: '/work', component: 'pages/work' }, { name: 'contact', path: '/contact', component: 'pages/contact' }, { name: 'me', path: '/me', component: 'pages/me/index.vue' }, { name: 'me-about', path: '/me/about', component: 'pages/me/about.vue' }, { name: 'dashboard', path: '/dashboard', component: 'pages/dashboard.vue', children: [ { name: 'dashboard-user', path: '/dashboard/user', component: 'pages/dashboard/user.vue' }, { name: 'dashboard-settings', path: '/dashboard/settings', component: 'pages/dashboard/settings.vue' } ] } ] }

Обратите внимание, что имя маршрута всегда следует регулярному шаблону:

 name of the folder + '-' + name of the file

При этом вы можете быть уверены, что каждый маршрут будет иметь уникальное имя.

Динамические маршруты

Динамические маршруты — это маршруты, определяемые переменной . Эта переменная может быть именем, номером или id , полученным из клиентских данных в приложении. Это удобно при работе с API, где id , скорее всего, будет id элемента, поступающего из базы данных.

В Nuxt динамические маршруты определяются путем добавления _ к имени файла или имени папки в папке pages. Например, если вам нужен динамический маршрут с именем переменной id , все, что вам нужно, это назвать ваш файл _id.vue , и Nuxt автоматически создаст для вас динамический маршрут. Например:

 pages/ --| me/ -----| index.vue -----| about.vue -----| _routeName -------| index.vue -------| info.vue --| dashboard/ -----| user.vue -----| settings.vue --| dashboard.vue --| work.vue --| _id.vue --| contact.vue --| index.vue

Это автоматически создаст файл маршрутизатора со следующими маршрутами:

 { name: 'work', path: '/work', component: 'pages/work' }, { name: 'contact', path: '/contact', component: 'pages/contact' }, { name: 'id', path: '/:id', component: 'pages/_id.vue' } { name: 'me', path: '/me', component: 'pages/me/index.vue' }, { name: 'me-about', path: '/me/about', component: 'pages/me/about.vue' }, { name: 'me-routeName', path: '/me/:routeName', component: 'pages/me/_routeName/index.vue' }, { name: 'me-routeName-info', path: '/me/:routeName/info', component: 'pages/me/route.vue' }, { name: 'dashboard', path: '/dashboard', component: 'pages/dashboard.vue', children: [ { name: 'dashboard-user', path: '/dashboard/user', component: 'pages/dashboard/user.vue' }, { name: 'dashboard-settings', path: '/dashboard/settings', component: 'pages/dashboard/settings.vue' } ] } ] }

Хотя некоторые теги маршрутизатора Vue.js работают в Nuxt и могут использоваться взаимозаменяемо, рекомендуется использовать компоненты маршрутизатора Nuxt. Вот некоторые различия между тегами Nuxt Router и тегами Router Vue.js.

Разница между маршрутизатором vue.js и маршрутизатором nuxt.js

На данный момент вот как должно выглядеть ваше приложение с навигацией, показанной вверху.

Теперь, когда мы понимаем, как работают страницы и маршруты Nuxt, давайте добавим нашу первую страницу и маршрут about.vue . На этой странице будут перечислены некоторые каталоги в приложении со ссылкой на новую страницу, которая показывает больше информации о таком каталоге.

Добавим к нему следующий код:

 <template> <section class="home"> <h1 class="home__heading">About Nuxtjs Directory Structure</h1> <div class="directories"> <div class="directory__container" v-for="directory in directories" :key="directory.id"> <p class="directory__name"> <nuxt-link :to="{ name: 'id', params: { id: directory.id, dir: directory } }" >{{ directory.name }}</nuxt-link> </p> </div> </div> </section> </template> <script> export default { name: "about-nuxt", data() { return { directories: [ { id: 0, name: "The Assets Directory", info: "By default, Nuxt uses vue-loader, file-loader and url-loader webpack loaders for strong assets serving. You can also use the static directory for static assets. This folder is for un-compiled files such as images, font files, SASS, LESS or JavaScript files" }, { id: 1, name: "The Components Directory", info: "The components directory contains your Vue.js Components. You can't use asyncData in these components." }, { id: 2, name: "The Layouts Directory", info: "The layouts directory includes your application layouts. Layouts are used to change the look and feel of your page (for example by including a sidebar). Layouts are a great help when you want to change the look and feel of your Nuxt.js app. Whether you want to include a sidebar or having distinct layouts for mobile and desktop" }, { id: 3, name: "The Middleware Directory", info: "The middleware directory contains your Application Middleware. Middleware lets you define custom functions that can be run before rendering either a page or a group of pages (layouts)." }, { id: 4, name: "The Pages Directory", info: "The pages directory contains your Application Views and Routes. The framework reads all the .vue files inside this directory and creates the application router. Every Page component is a Vue component but Nuxt.js adds special attributes and functions to make the development of your universal application as easy as possible" }, { id: 5, name: "The Plugins Directory", info: "The plugins directory contains your Javascript plugins that you want to run before instantiating the root Vue.js Application. This is the place to register components globally and to inject functions or constants. Nuxt.js allows you to define JavaScript plugins to be run before instantiating the root Vue.js Application. This is especially helpful when using your own libraries or external modules." }, { id: 6, name: "The Static Directory", info: "The static directory is directly mapped to the server root (/static/robots.txt is accessible under https://localhost:3000/robots.txt) and contains files that likely won't be changed (eg the favicon). If you don't want to use Webpack assets from the assets directory, you can create and use the static directory (in your project root folder)." }, { id: 7, name: "The Store Directory", info: "The store directory contains your Vuex Store files. The Vuex Store comes with Nuxt.js out of the box but is disabled by default. Creating an index.js file in this directory enables the store. Using a store to manage the state is important for every big application. That's why Nuxt.js implements Vuex in its core." } ] }; } }; </script> <style> </style>

Начиная с раздела script , мы создали массив, который мы храним в переменной directories . Каждый массив содержит объект с id , name и info . Это данные, которые мы покажем пользователю при открытии этой страницы. Мы хотим показать его пользователю так, чтобы имена были кликабельными.

Мы делаем это в разделе template , используя v-for для перебора массива. Это позволяет получить каждый элемент массива, к которому мы можем получить доступ, используя directory . В цикле мы используем nuxt-link для обработки ссылок каждый раз. Используя nuxt-link , мы передаем детали ( id , name и info ) каждого элемента каталога через маршрутизатор nuxt. Мы делаем это, потому что хотим иметь возможность отображать это на странице показа, когда пользователь нажимает на элемент.

Если вы перейдете к маршруту /about с помощью браузера, вы должны увидеть что-то вроде этого:

Теперь давайте создадим новый файл и назовем его _id.vue. Это автоматически создаст динамический маршрут, который берет параметр id из ссылки, отображающей небольшую информацию о любом каталоге, на который щелкнули на странице «О программе».

Давайте добавим это в наш файл:

 <template> <section class="directory"> <h1 class="directory__name">{{ directory.name }}</h1> <p class="directory__info">{{ directory.info }}</p> </section> </template> <script> export default { name: "directory-info", data() { return { directory: this.$route.params.dir }; } }; </script> <style> </style>

Что мы сделали, так это создали страницу, которая извлекает данные из каталога параметров маршрута, используя this.$route.params dir Это дает нам name и info о выбранном каталоге, которые мы затем отображаем пользователю.

Поэтому, если вы нажмете на любую ссылку каталога (например, каталог магазина), вы должны увидеть это.

Но есть проблема: если вы обновите эту страницу, информация о вашем каталоге будет потеряна, и вы получите сообщение об ошибке. Это можно исправить с помощью нашего магазина Vuex, так что давайте углубимся в это.

Использование магазина Vuex в Nuxt

Доступ к Vuex можно получить в Nuxt, используя два режима:

1. Классический режим ( устарел ).
2. Режим модулей.

Режим модулей

Nuxt автоматически создает папку Store при создании вашего приложения. В режиме модулей Nuxt будет рассматривать каждый файл в этой папке как модуль, но для активации хранилища index.js в вашем приложении требуется index.js. Итак, давайте создадим файл index.js в папке нашего магазина и настроим его для использования. Давайте добавим следующее в наш файл.

index.js

 export const state = () => ({ }) export const getters = { } export const mutations = { } export const actions = { }

Все, что мы сделали, это создали хранилище для нашего файла со всем, что нам может понадобиться; state для хранения данных, getters для выполнения дополнительных манипуляций с нашим state , mutations для изменения нашего state и actions для фиксации мутаций.

Nuxt также позволяет пользователям разделять каждую основную концепцию на разные файлы, что означает, что у нас могут быть store.js , getters.js , mutation.js и action.js , и это хорошо, так как упрощает обслуживание. Теперь мы исправим проблему исчезновения каталога при обновлении, мы будем использовать хранилище, но сначала нам нужно установить и настроить Vuex persist для нашего хранилища.

Установите Vuex persist из npm, используя любую из приведенных ниже команд, в зависимости от ваших предпочтений.

 $ npm install --save vuex-persist

или

 $ yarn add vuex-persist

После установки мы создадим файл vuex-persist.js в папке с нашими плагинами и добавим следующее:

 import VuexPersistence from 'vuex-persist' export default ({ store }) => { window.onNuxtReady(() => { new VuexPersistence({ storage: window.localStorage }).plugin(store); }); }

Здесь мы импортируем наш плагин из node-modules и настраиваем его для сохранения вашего магазина в localStorage . Этот плагин позволяет вам выбирать другие варианты хранения, такие как sessionStorage , поэтому не стесняйтесь изучать их документацию для получения дополнительной информации.

Не забудьте добавить его в файл nuxt.config.js .

 /* ** Plugins to load before mounting the App */ plugins: [{ src: '~/plugins/vuex-persist', mode: 'client' }],

Здесь мы добавили путь к нашему плагину и сказали Nuxt запускать этот плагин только на стороне client этого приложения.

Теперь мы можем настроить наш магазин так, чтобы он принимал и сохранял информацию о каталоге. Обновите свой магазин, чтобы обрабатывать информацию о каталоге следующим образом:

 export const state = () => ({ directory: '' }) export const getters = { } export const mutations = { saveInfo(state, payload) { state.directory = payload.directory } } export const actions = { }

Что мы сделали, так это добавили состояние directory в наше хранилище и функцию мутации saveInfo , которая изменяет значение состояния directory , которое мы добавили в наше хранилище, в ожидании данных, которые мы скоро будем ему передавать.

Затем в вашем файле about.vue обновите его, чтобы он выглядел следующим образом.

 <template> <section class="home"> <h1 class="home__heading">About Nuxtjs Directory Structure</h1> <div class="directories"> <div class="directory__container" v-for="directory in directories" :key="directory.id" @click.prevent="storeDirectoryInfo(directory)" > <p class="directory__name"> <nuxt-link :to="{ name: 'id', params: { id: directory.id, dir: directory } }" >{{ directory.name }}</nuxt-link> </p> </div> </div> </section> </template> <script> export default { name: "about-nuxt", data() { return { directories: [ //remains the same ] }; }, methods: { storeDirectoryInfo(dir) { this.$store.commit("saveInfo", { directory: dir }); } } }; </script> <style> </style>

Теперь мы добавили событие щелчка в каждый контейнер каталога, который передает информацию о каталоге в качестве аргумента в storeDirectoryInfo . В этой функции мы фиксируем объект каталога в нашем хранилище.

Наконец, мы вернемся к нашему файлу _id.vue и заменим переменную каталога нашими данными из хранилища следующим образом:

 <template> <section class="directory" v-if="directory"> <h1 class="directory__name">{{ directory.name }}</h1> <p class="directory__info">{{ directory.info }}</p> </section> </template> <script> import { mapState } from "vuex"; export default { name: "directory-info", computed: { ...mapState(["directory"]) } }; </script> <style></style>

Здесь мы реорганизуем наш код, чтобы использовать объект каталога непосредственно из нашего хранилища, сначала импортировав mapState из Vuex.

 import { mapState } from 'vuex';

Вместо того, чтобы сначала проверять, не определен ли this.$route.params.dir undefined доступом к данным из нашего хранилища, мы решаем использовать наше хранилище, читая данные, которые находятся в хранилище.

 <script> import { mapState } from "vuex"; export default { name: "directory-info", computed: { ...mapState(["directory"]) } }; </script>

Затем мы обновляем наш шаблон, чтобы убедиться, что он не отображается, пока directory не определен.

 <template> <section class="directory" v-if="directory"> <h1 class="directory__name">{{ directory.name }}</h1> <p class="directory__info">{{ directory.info }}</p> </section> </template>

При этом, независимо от того, сколько раз мы обновляем наше приложение, наш объект каталога находится в безопасности в нашем хранилище, и к нему можно легко получить доступ с помощью метода …mapState(['stateVariable']) .

Развертывание в Heroku

Теперь, когда наше nuxt-tutorial-app завершено, что дальше? Развертывание нашего блестящего нового приложения в рабочей среде.

Мы будем развертывать наше приложение Nuxt.js на Heroku с помощью Github для упрощения развертывания, поэтому, если вы еще не настроили репозиторий для своего приложения, сейчас самое время это сделать. Следующим шагом было бы открыть Heroku и создать новое приложение, выбрать имя и подключить его к GitHub и репозиторию, созданному выше. Далее зайдите в настройки, вы должны увидеть что-то вроде этого.

Теперь добавьте следующие переменные конфигурации.

 NPM_CONFIG_PRODUCTION=false HOST=0.0.0.0 NODE_ENV=production

Следующее, что нам нужно сделать, это создать Procfile в корневой папке нашего приложения (тот же уровень, что и nuxt.config.js ) и ввести следующую команду:

 web: nuxt start

Это запустит команду nuxt start и скажет Heroku направить на нее внешний HTTP-трафик.

После добавления Procfile в приложение зафиксируйте и отправьте изменения в репозиторий. Если для вашего приложения включено автоматическое развертывание, ваше приложение должно быть активным и доступным по его URL-адресу. Если вы видите свое приложение вживую, поздравляем! вы успешно создали и развернули свое первое приложение Nuxt.js.

Заключение

Теперь, когда мы знаем, как создать базовое приложение Nuxt и развернуть его на Heroku, что дальше? Вот некоторые ресурсы, которые охватывают такие вещи, как использование Axios в Nuxt и внедрение аутентификации в вашем приложении.

1. Использование модуля аксиом.
2. Реализация аутентификации в Nuxt.
3. Официальная документация Nuxt.js.
4. nuxt-tutorial-app Github.