Svelte store和routify $params的奇怪行为。

Question

我在做一个论坛，在这个论坛里，所有的消息都以某种方式相互链接。为了节省数据库的读取，我将消息存储在$messageStore中作为$messageStore[messageId]。我使用routify的$params来导航从messageid1到messageid2等等，每一页都包含了$params中标识的消息，同时也包含了其他可能已经或可能还没有在商店中的链接消息。

我的问题是

第一, 组件没有被卸载, 所以当$params改变时, 我触发了一个1ms的值, 使主组件的渲染失效, 并迫使init()函数检查它是否需要在DB上获取... ... 很丑，目前看来还行，但我敢打赌，这个总有一天会失败，这取决于它运行的机器。

第2，做完之后，我遇到了我不明白的事情。在页面变化的时候，$messageStore并没有变化，但是突然间我得到了很多未定义的值。好像是$params从value1变成什么都没有再变成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的时候没有得到的东西，改变了存储值和执行顺序。

我似乎找到了一个方法，通过从顶部组件中传递参数，在页面变化时闪烁，但如果有人能教我一些东西，我会非常感激......

Answer 1

我很困惑，你想实现什么，如何实现，问题1是什么。为了入门，我只想给你抛出一些要点，可能会有帮助，也可能没有帮助。我希望这样做是可以的。

1. 反应性的处理应以 $:. 即要监听一个店铺的变化，你需要写。$: console.log($mystore)
2. Routify 1.8测试版支持serviceworkers，离线可用性，外部资产的预取和缓存。这可能有助于解决对你的API的重复请求。

3. 我正在使用routify的$params从messageid1导航到messageid2等。

   ^ 这是什么意思？

4. 你能不能在Codesandbox上创建一个问题的副本？

我希望我能提供更多的帮助，但这个问题感觉有点黑心。

Answer 2

我想我对图片也是这样做的，但我对你的用例有点困惑。对我来说，我有一个文件夹 gallery 白蚁 index.svelte 和a [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，然后用函数来跟踪你在哪个索引上。