Vue.js 在不同路由上使用具有不同值的相同类型数据时的Vuex状态结构和获取

我正在使用vue、vuex和vue路由器创建一个组合，以显示图像

在主页上，我将显示带有“show_home:true”的图像

然后是“标记”页面（公文包/：tagSlug），它将显示基于slug的图像，例如带有无限卷轴的“婚礼”（自动填充分页）

图像对象的外观类似于：

{
   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获取图像后用所有图像填充它，然后用getter过滤它们？那样的话，我怎么才能把页码放进去呢？或者你有更好的解决方案吗

---

提前感谢

我更喜欢的方法是“扁平化”关系，并根据需要拉它们。这还允许您仅从服务器或相关模块中提取所需内容

标记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.

此路由将监视您的api调用并确定它是否为index/store/show/delete。从前端你可以打一个电话，比如（如果结婚标签的id为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);
}

公共功能索引（请求$Request，$id）
{
$tag=MemTag:：find（$id）；
$images=$tag->images（）->get（）；
$images->load（图像：：allowedIncludes）；嗨！谢谢你的回答！关于从api获取的一件事。我不想获取所有图像，只需要所需的图像。你将如何实现这一点？假设“weerings”有图像1、2、3，那么我只想获取它们。然后“water”有图像3、4，那么我只想获取4，因为3已经获取了？我将设置嵌套的端点ts代表所有其他动词。Laravel在减少设置所需的工作量方面做得很好。我将修改我的答案以展示我是如何做到这一点的。哈哈，你是最好的！谢谢。然后是vuex句柄。你覆盖了“全部”吗在图像模块中，当您从路线“标签/婚礼”转到“标签/水”时，例如？不，我会合并它们，但在您的情况下可能不需要合并。如果您仅通过标签显示图像，这似乎是一个可行的解决方案。
public function show($id)
{
    $tag = Tag::where('id', $id)->with('images')->firstOrFail();
    return new TagResource($tag);  <-- will have all related images loaded. 
}

Route::apiResource('tags.images', 'tags\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);
}