В одностраничном приложении, управляемом API, HTML/CSS/JS загружается раньше всего. Это означает, что на странице будут загружены макет и стили, но больше данных. Что мы сделаем, так это привяжем один из хуков жизненного цикла для компонента домашней страницы и загрузим данные. Если вы не знакомы с хуками жизненного цикла VueJS, ознакомьтесь с: Экземпляр Vue — Vue.js. По сути, это точки в процессе рендеринга компонента, к которым вы можете привязать определенные события.
На главной странице хотелось бы вывести список кафе хоть где-то, так что давайте пока загрузим все кафе на домашнем маршруте. Для этого откройте страницу /resources/assets/js/pages/Home.vue.
Мы привяжемся к хуку жизненного цикла created(), который вызывается при создании компонента. Здесь мы будем отправлять действия для загрузки кафе.
А пока добавьте заглушенный метод для привязки к хуку created() следующим образом:
<script>
export default {
created(){
}
}
</script>Шаг 2. Отправьте действие «Загрузить кафе»
Поскольку нам нужно загрузить все кафе, нам нужно отправить действие на наш магазин. Есть несколько способов сделать это, как описано в документации: Действия · Vuex. Мне нравится вызывать метод переменной $store (которая является нашим глобальным хранилищем данных Vuex) для отправки действия. Если вы посмотрите на файл /resources/assets/js/modules/cafe.js, вы увидите все действия, которые мы настроили в предыдущем уроке. Нам нужно загрузить все кафе, поэтому мы будем использовать метод loadCafes. В наш хук жизненного цикла created() нам нужно добавить следующий код:
this.$store.dispatch( 'loadCafes' );Это делает использование хранилища VueJS и отправку действия loadCafes, которое вызовет API, загрузит кафе и сохранит их в массиве кафе в модуле кафе. Теперь, когда страница загрузится, у нас также будут загружены все наши кафе! Я займусь оптимизацией этих загрузок в следующих уроках, потому что есть куча сценариев навигации, чтобы определить, перезагружаем ли мы кафе или нет, но пока мы будем жить как есть.
Шаг 3: Добавьте кафе в компонент
Это самый важный шаг, отображение данных! К сожалению, сейчас в нашей базе данных нет кафе, если только вы не используете Faker и не заполняете тестовые данные, что круто (GitHub — fzaninotto/Faker: Faker — это PHP-библиотека, которая генерирует для вас фальшивые данные). Мы просто настроим это для следующих нескольких частей серии, когда будем добавлять данные в нашу базу данных.
С Vuex все геттеры, которые мы настроили в нашем модуле, импортируются в наши компоненты как вычисляемые свойства: Геттеры · Vuex. На главной странице мы хотим получить загруженные кафе, а также статус загрузки кафе, чтобы мы могли отображать пользователю, загружаем ли мы кафе или нет.
Для этого нам понадобятся 2 вычисляемых свойства, и мы добавим их в наш файл Home.vue следующим образом:
/*
Defines the computed properties on the component.
*/
computed: {
/*
Gets the cafes load status
*/
cafesLoadStatus(){
return this.$store.getters.getCafesLoadStatus;
},
/*
Gets the cafes
*/
cafes(){
return this.$store.getters.getCafes;
}Теперь у нас есть два вычисляемых свойства, которые мы можем использовать для отображения данных. Каждый из методов возвращает данные из геттеров, которые мы определили в нашем модуле Vuex cafe.js. Теперь мы можем использовать вычисляемые свойства так же, как и с любым типом данных в нашем приложении.
Шаг 4: Отобразите данные
На данный момент у меня нет стилей CSS в этом приложении, но я просто покажу краткий пример того, как отображать данные. Мы сообщим пользователю, загружаются ли кафе, и переберем все кафе, которые у нас есть. Сейчас лично я не добавлял кафе в базу, так что, к сожалению, ничего не появится. Следующие две статьи будут посвящены добавлению кафе и добавлению нескольких стилей, чтобы нам было что показать.
Чтобы показать состояние загрузки, вы можете добавить некоторые элементы в шаблон Home.vue, например:
<span v-show="cafesLoadStatus == 1">Loading</span>
<span v-show="cafesLoadStatus == 2">Cafes loaded successfully!</span>
<span v-show="cafesLoadStatus == 3">Cafes loaded unsuccessfully!</span>Каждый из этих элементов будет отображаться с соответствующим статусом загрузки кафе.
Чтобы перечислить кафе, вы можете сделать что-то вроде этого:
<ul>
<li v-for="cafe in cafes">{{ cafe.name }}</li>
</ul>Каждое кафе — это объект, возвращаемый из базы данных. Для получения дополнительной информации о рендеринге списка ознакомьтесь с документацией VueJS здесь: Визуализация списка — Vue.js
Наш файл Home.vue должен выглядеть так:
<style>
</style>
<template>
<div id="home">
<span v-show="cafesLoadStatus == 1">Loading</span>
<span v-show="cafesLoadStatus == 2">Cafes loaded successfully!</span>
<span v-show="cafesLoadStatus == 3">Cafes loaded unsuccessfully!</span>
<ul>
<li v-for="cafe in cafes">{{ cafe.name }}</li>
</ul>
</div>
</template>
<script>
export default {
created(){
this.$store.dispatch( 'loadCafes' );
},
/*
Defines the computed properties on the component.
*/
computed: {
/*
Gets the cafes load status
*/
cafesLoadStatus(){
return this.$store.getters.getCafesLoadStatus;
},
/*
Gets the cafes
*/
cafes(){
return this.$store.getters.getCafes;
}
}
}
</script>Наше приложение загружает кафе и отображает статус загрузки. Мы будем стилизовать это, чтобы сделать его полезным, но пока это работает!
Вывод
Теперь у нас есть все на месте и полностью рабочая система нашего одностраничного приложения! Есть еще много руководств, которые нужно написать, и функций, которые нужно добавить, но мы к чему-то движемся! В следующем уроке я добавлю несколько стилей в приложение, чтобы сделать его более полезным, а затем мы добавим кафе через внешний интерфейс! Как я уже упоминал ранее, у каждой функции будет руководство и открытый код здесь: GitHub — serversideup/roastandbrew.
Привет! Мы пишем книгу по разработке приложений на основе API. Узнай первым, как только он будет готов! Зарегистрируйтесь здесь: Регистрация для разработки приложений на основе API
