Структура состояния Vuex и выборка при использовании данных одного типа с разными значениями на разных маршрутах - PullRequest
Новая
       18

Структура состояния Vuex и выборка при использовании данных одного типа с разными значениями на разных маршрутах

0 голосов
/ 09 марта 2020

Я создаю портфолио с vue, vuex и vue -рутером, который будет показывать изображения.

На главной странице я буду показывать изображения с 'show_home: true'.

Тогда есть страницы «tag» (портфолио /: tagSlug), которые будут показывать изображения, основанные на слаге, например. 'weddings' с бесконечной прокруткой (автоматическое разбиение на страницы).

Объект изображения будет выглядеть примерно так: 

{
   id: 1,
   title: 'Lorem..',
   path: '..',
   show_home: true
   tags: [ {id: 1, slug: 'weddings'} ]

},
{
   id: 2,
   title: 'Lorem2..',
   path: '..',
   show_home: false
   tags: [ {id: 1, slug: 'weddings'}, {id: 2, slug: 'water'} ]

}

Примеры конечных точек: 

Homepage: GET: ../images/homepage?p=1 
Tag page: GET: ../images/:slug?p=1

Я могу ' не могу понять, как мне структурировать это в vuex и обрабатывать выборку.

Должен ли я просто создать одно состояние 'images: []' и заполнить его ВСЕМИ изображениями после извлечения их из API в каждом маршрут, затем фильтровать их с помощью геттеров? Как я могу получить там нумерацию страниц в этом случае? Или у вас есть лучшее решение?

Заранее спасибо

1 Ответ

1 голос
/ 09 марта 2020

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

теги модуля vuex: 

all: {
  1: {  <-- indexed by tag id
    name: "weddings"
    images: [1,2,3,4] <-- image ids
   }
  }
active: false  <-- When there is an active tag, this becomes the id of the tag.

Модуль изображений vuex будет следовать той же схеме: 

 all: {
  1: {  <-- indexed by image id
    title: 'Lorem..',
    path: '..',
    show_home: true
    tags: [1,2,3,4] <-- tag ids
   }
  }
active: false  <-- When there is an active image, this becomes the id of the image.

Затем используйте метод получения для гидратации изображений или тегов из соответствующий модуль vuex.
В этом блоге есть отличная статья об этом подходе: https://medium.com/js-dojo/structuring-vuex-modules-for-relationships-speed-and-durability-de25f7403643

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

РЕДАКТИРОВАНИЕ - Информация API:

На ум приходят два подхода. 1) всегда загружайте изображения с тегом.

Запрос индекса тега не будет загружать никакие изображения, только базовая информация c для каждого тега.

Когда пользователь нажимает на тег, это инициирует вызов API для получения сведений о теге:

Запрос на отображение тега (теги / 1 или теги / свадьбы) возвращает тег с загруженными отношениями: 

public function show($id)
{
    $tag = Tag::where('id', $id)->with('images')->firstOrFail();
    return new TagResource($tag);  <-- will have all related images loaded. 
}

2) настроить вложенную конечную точку REST, если необходимо

Вы можете использовать контроллеры ресурсов для быстрого выбора шаблона:

api. php 

Route::apiResource('tags.images', 'tags\TagImageController');

Этот маршрут будет следить за вашими вызовами API и определять, будет ли он индексировать / хранить / показывать / удалять. С вашего внешнего интерфейса вы можете сделать вызов, например, https://backendsite.com/tags/1/images (Если тег свадьбы имеет идентификатор 1)

Тогда в TagImageController у вас будет что-то вроде этого: 

public function index(Request $request, $id)
{
    $tag = MemTag::find($id);
    $images = $tag->images()->get();
    $images->load(Image::allowedIncludes); <- or you can manually list relationships you want to load

    return ImageResource::collection($images);
}
...