Довольно часто нам нужны изображения для разных блоков, и мы утомительно назначаем каждое изображение вручную. Более простой способ - создать образы-заглушки с помощью 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. Код авторизации отправляется в заголовках, когда мы делаем этот запрос. Используйте переменные среды для кода авторизации для большей безопасности.

Переменная среды в vue

Если запрос выполнен успешно, возвращаются данные, а источником нашего изображения является 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)
}

Заключение

Поздравляем, мы просто автоматизировали заготовки изображений для наших сообщений. Получение соответствующих изображений-заглушек для проекта может сэкономить массу времени и помочь сосредоточиться на его функциональности. Надеюсь, вам понравилась статья. Хотелось бы услышать отзывы. Оставайся в безопасности. Удачного кодирования!