2

我在 Svelte3 和 Sapper 待了 3 天,它们很酷,但我不确定我是否正确烹饪它们。

我的应用程序简化结构:


├── routes
│   ├── _error.svelte
│   ├── _layout.svelte // parent layout (PL)
│   ├── index.svelte
│   ├── catalog
│   │   ├── _layout.svelte // child layout (CL)
│   │   ├── [cat].svelte // first level category (1L)
│   │   ├── [cat]
│   │   │   ├── [subcat].svelte // second level category (2L)

发生了什么:

1) 我的 PL 包含标题菜单,所以我使用 preload(page, session) 和 this.fetch 从它的模块脚本中询问类别数据。另外我必须在那里做一些逻辑,所以我得到路径数据(slugs)。我 .set 类别和路径数据存储在 PL 简单脚本中。

2) CL 包含面包屑组件。Breadcrumbs 从存储中获取 $pathData (我需要将此数据存储在其他逻辑中)。SSR 显示逻辑按预期工作。

3)由于我需要在目录页面之间移动时更改面包屑,我还应该更改存储中的路径数据,因此每条路线 .svelte 都有带有 Preload 返回参数的模块脚本。在简单的脚本中,我 .update(old => new) 存储路径数据。

我希望面包屑在我更改商店后自动更新,但只有在我更改路线时才会更新,即从 L1 导航到 L2 或返回 ()。虽然我在一级面包屑的类别之间导航,但不会改变。

问题:

1)这是正确的行为还是我弄坏了一些东西?如果正确,我应该如何更新面包屑?我可以将它们放在 L1 和 L2 中,但由于重复代码,这在逻辑上似乎很奇怪。

1.1)我将阅读更多关于路由中的正则表达式的信息——这似乎是用一个文件替换 L1 和 L2 .svelte 的方法——它解决了重复代码的问题。但理想情况下,面包屑应该放在 PL 中,这样我就可以再次面临同样的更新问题。我看过https://svelte.dev/docs#bind_element_property和下面的部分,但我不明白这是我的情况,我应该写什么以及在哪里写。

2) 有没有办法将变量从 PL 模块脚本传递到 CL 模块脚本?我是否需要根据我在 PL 中获得的类别数据从 CL 发出产品请求,但存储在模块脚本中不可用,所以现在我在 PL 中进行产品请求(如果需要)(不能在简单脚本中进行产品请求,因为需要 SSR产品)。这似乎很奇怪,因为产品请求显然属于目录布局(CL)或路线 - 而不是 PL!我使用的 API 很奇怪——我知道,但一定有办法……

更新:

3)我有关于路线中正则表达式的红色文档,但我没有找到如何将我的所有目录路线作为一条路线呈现的答案。我可以将 catalog/[cat] 和 catalog/[cat]/[subcat] 路线描述为一条路线吗?

我几乎可以肯定有一个错误,但我找不到它。 https://bitbucket.org/LittleToky/rerooms-store-svelte/commits/50dde002fe9c8ae91a3276bd9a551a7b26841d3c 如果有人要测试它:首先导航到 /rooms/living/miebiel/miaghkaia-miebiel/ 并单击侧面菜单中的不同类别。 在此处查看图片

4

1 回答 1

0

为面包屑创建一个单独的存储(单独的文件),并在两个布局组件中使用它。
使用商店是在组件之间共享状态的推荐方法。

于 2019-12-11T13:24:31.417 回答