Довольно часто нам нужны изображения для разных блоков, и мы утомительно назначаем каждое изображение вручную. Более простой способ - создать образы-заглушки с помощью Unsplash и Lodash в нашем проекте Vue.
Цель состоит в том, чтобы прочитать массив объектов с ключевым словом, назначенным для каждого из них, и разместить изображения, полученные путем вставки службы Unsplash.
Начнем с создания компонента «Сообщения» и магазина Vuex.
mkdir components; cd components; touch Posts.vue mkdir store; cd store; touch index.js
Из корня нашего проекта Vue мы запускаем следующие команды. Это создает два каталога для управления компонентом публикации и хранилищем Vuex. Данные для наших сообщений будут храниться в нашем хранилище Vuex index.js. Интерфейс для наших постов будет в posts.vue.
index.js
Хранилище Vuex управляется в index.js и, как правило, в нем хранится несколько небольших модулей. мы можем получить доступ к модулям как
this. $ store.modulename или this. $ store.a / b / c….
A, b, c и т. Д. Будут относиться к первому, второму и третьему модулям в магазине. У нас есть данные JSON, как показано ниже, которые хранятся в модуле сообщений нашего магазина Vuex.
posts: [ { photo: '', keyword: 'Programming', descriptions: ['...'] }, { photo: '', keyword: 'Muay Thai', descriptions: ['All about Muay thai...'] }, { photo: '', keyword: 'javascript', descriptions: ['...'] }, ]
действие getImage
Поскольку каждый объект имеет ключевое слово, связанное с ним, и ключевое слово уникально. Изображение для каждого сообщения также будет связано с тем же ключевым словом. Поскольку изображения собираются из Unsplash API, нам нужна библиотека для обработки нашего HTTP-запроса. Я использую Axios для выполнения запроса GET. Код авторизации отправляется в заголовках, когда мы делаем этот запрос. Используйте переменные среды для кода авторизации для большей безопасности.
Если запрос выполнен успешно, возвращаются данные, а источником нашего изображения является data.data.photos [0] .src.
Размер можно извлечь с помощью source.size, поэтому data.data.photos [0] .src.size - это желаемое изображение без всплывающего окна.
Затем мы отправляем действие setImage, которое присваивает изображение каждому сообщению. Наконец, у нас есть инструкция catch для обработки ошибок.
действие setImage
В действии setImage мы связываем изображение с индексом маппинга. Индекс рассчитывается с помощью функции findIndex из библиотеки Lodash.
_.findIndex возвращает индекс первого элемента
predicate
возвращает true вместо самого элемента
Итак, полезная нагрузка в setImage передается как
{ key: keyword, unsplashimage: data.data.photos[0].src.large }
FindIndex здесь соответствует ключевому слову сообщения и ключу изображения и возвращает индекс сообщения, для которого они идентичны. Кроме того, это вызывает мутацию SET_PHOTO. Отъезд lodash
Этот код будет работать для динамических пост-данных с большим числом n.
Наконец, каждому из наших сообщений с мутацией SET_PHOTO присваивается правильное изображение.
Posts.vue
Для создания внешнего вида страницы в Posts.vue добавляется разметка.
Vue, Lodash, Axios и Vuex импортируются в наш почтовый компонент.
import Vue from 'vue' import _ from ‘lodash’ import axios from 'axios' import { mapState } from ‘vuex’ import { mapActions } from ‘vuex’
Мы сопоставляем посты Json из пост-модуля из нашего магазина. «State.a» получает первый модуль в нашем магазине, потому что в нашем магазине обычно будет более одного модуля, и я предполагаю, что пост-модуль - это первый модуль в нашем магазине.
computed:mapState({ postsComp: state => state.a.posts })
Итак, в нашем компоненте сообщения доступны как postsComp
Для рендеринга сообщений мы перебираем postsComp. При этом запускается метод getImageComp и передается ключевое слово сообщения.
<div class=”post-block” v-for=”post in postsComp” :on=”getImageComp(post.keyword)” :key=”post.id”>
getImageComp с параметром ключевого слова передается в действие getImage в магазине Vuex.
this. $ store относится к хранилищу Vuex, а a / getImage вызывает действие getImage в сообщениях- модуль.
getImageComp (keyword) { this.$store.dispatch('a/getImage',keyword) }
Заключение
Поздравляем, мы просто автоматизировали заготовки изображений для наших сообщений. Получение соответствующих изображений-заглушек для проекта может сэкономить массу времени и помочь сосредоточиться на его функциональности. Надеюсь, вам понравилась статья. Хотелось бы услышать отзывы. Оставайся в безопасности. Удачного кодирования!