svelte store和routify $params的奇怪行为，

Question

我正在做一个论坛，在那里所有的消息都以某种方式相互链接。为了节省数据库读操作，我将消息作为$messageStoremessageId存储在$messageStore中。我正在使用routify的$params从/ message /id1导航到/message/id2等，其中每个页面都包含在$params中标识的消息，以及可能已经存在于存储中或可能不存在的其他链接消息。

我的问题是：

首先，组件没有卸载，所以当$params更改时，我会通过闪烁一个值1ms来触发，该值禁用了主组件的呈现，并强制init()函数检查它是否需要从DB上获取什么。它很难看，到目前为止似乎还可以工作，但我打赌有一天它会失败，这取决于它运行的机器。

第二，在这样做之后，我遇到了一些我不理解的事情。当页面改变时，$messageStore不会改变，但是突然间我得到了很多未定义的值。看起来$params正在从value1到nothing再到value2。此外，如果我签入init()函数if($messageStore$params.id.someKey==="someValue")，，它不会通过，尽管我确定它在存储中。

如果我这么做了

console.log($messageStore[$params.id].someKey) console.log($messageStore[$params.id].someKey==="someValue") if($messageStore[$params.id].someKey==="someValue"){console.log('passed')}else{console.log("failed")}

我得到了：

"someValue"
true
"failed"

这就像console.log()在执行时没有给出结果一样。

在使用Routify之前，我用svelte-spa-router做了同样的事情，所以它可能是我在svelte和改变存储值和执行顺序时不会得到的东西。

我似乎找到了一种方法，通过从顶部组件传递带作用域的道具来传递params，该组件在页面更改时闪烁，但如果有人能在那里教我一些东西，我将非常感激。

Answer 1

我对你试图实现的目标，你如何实现它，以及问题1是什么感到困惑。作为开始，我将向您抛出一些要点，这些要点可能会有帮助，也可能没有帮助。我希望这没问题。

应使用$:处理

1. 反应性。即。要侦听存储上的更改，您需要编写代码。$: console.log($mystore)
2. Routify 1.8测试版支持serviceworkers、离线可用性、外部资产预取和缓存。这可能有助于处理对您的API的重复请求。
3. 我正在使用routify的$params从/message/id1导航到/message/id2

^这是什么意思？

您能否在Codesandbox?上创建问题的副本

我希望我能提供更多的帮助，但这个问题让人感觉有点黑箱作业。

Answer 2

我想我对图片做了同样的事情，但我对你的用例有点困惑。对我来说，我有一个文件夹，一个白色的index.svelte和一个[image].svelte。所以你可以去gallery/1，gallery/2等网站上看到不同的图片。不使用params，只需使用export let image (或者在本例中为export let id )来访问消息id。然后，您可以使用您的id在$messagestore中获取正确的索引，如下所示：

//this will get the the url param
export let id
//this will change every time your id chages, i.e. message/1 to message/2
$: if (id) { 
    getIndex();
}

 async function getIndex() {
//make sure the message store has finished loading, you'd set this in the store
await waitFor(() => $messageStoreLoaded === true);

sIndex = await $messageStore.findIndex(p => p.id === id);
//if for whatever reason the message is not in the store, do some error handling
if (sIndex == -1) sIndex = -2;

//keep a store of what index you're on, this is another writable store
await messageStoreIndex.update(n => (n = sIndex));

//load the new message data from the store
newMessage = $storePics[$storePicsIndex];
}

function waitFor(conditionFunction) {
  const poll = (resolve) => {
    if (conditionFunction()) resolve("The Thing Finished");
//you can get rid of the console.log, and change the millisenconds to whatever, I usually stick to 100 to 400 for most things
    else console.log("Still Wating..."), setTimeout((_) => poll(resolve), 200);
  };
  return new Promise(poll);
}

希望这能给你一个起点。您可以进行一次数据库调用来填充messageStore，然后只需跟踪函数所在的索引即可。