Svelte3工兵:如何在商店更新时更新父布局?我可以在嵌套布局模块脚本之间传输数据吗?



我在 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(。I .在PL简单脚本中设置存储的类别和路径数据。

2( CL 包含面包屑成分。面包屑从存储中获取$pathData(我需要此数据存储用于其他逻辑(。SSR 显示逻辑按预期工作。

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

我希望面包屑会在我更改商店后自动更新,但仅当我更改路线(即从 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(我在路线中有关于正则表达式的红色文档,但我没有找到如何将我所有的目录路线显示为一条路线的答案。我可以将目录/[猫]和目录/[猫]/[子猫]路由描述为一个路线吗?

我几乎可以肯定有一个错误,但我找不到它。 https://bitbucket.org/LittleToky/rerooms-store-svelte/commits/50dde002fe9c8ae91a3276bd9a551a7b26841d3c 如果有人要测试它: 首先导航到/房间/客厅/米耶比尔/米亚哈亚-米耶比尔/,然后单击侧边菜单中的不同类别。 看图片

这里

为痕迹导航创建单个存储(单独的文件(,并在两个布局组件中使用它。
建议使用存储在组件之间共享状态。

最新更新