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

时间:2019-09-19 08:37:34

标签: svelte sapper

我在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从其模块脚本中查询类别数据。另外,我必须在那里做一些逻辑运算,以便获取路径数据(段)。我将类别和路径数据设置为存储在PL简单脚本中。

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

3)因为在目录页面之间移动时需要更改面包屑,所以我还应该更改存储中的路径数据,因此每个route .svelte都具有带有预载返回参数的模块脚本。在简单的脚本中,我.store中的.update(old => new)路径数据。

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

问题:

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

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

2)有什么方法可以将变量从PL模块脚本传递到CL模块脚本?我需要从CL中获取产品请求,具体取决于我在PL中获得的类别数据,但模块脚本中没有存储,因此现在我在PL中需要时进行产品请求(由于需要SSR,因此无法在简单脚本中执行产品请求产品)。这似乎很奇怪,因为产品请求显然属于目录布局(CL)或路由-而不是PL!我使用的API很奇怪-我知道,但一定有办法...

更新:

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

我几乎可以肯定有一个错误,但是我找不到。 https://bitbucket.org/LittleToky/rerooms-store-svelte/commits/50dde002fe9c8ae91a3276bd9a551a7b26841d3c 如果有人会测试它: 首先导航到 / rooms / living / miebiel / miaghkaia-miebiel / 然后在侧面菜单中点击其他类别。 See image here

1 个答案:

答案 0 :(得分:0)

为面包屑创建一个单独的存储(单独的文件),并在两个布局组件中使用它。
建议使用存储来在组件之间共享状态。