Svelte - 尝试访问“store.js”中的“可读”对象返回“未定义”答案

【问题标题】：Svelte - Trying to access a 'readable' object within 'store.js' returns 'undefined'Svelte - 尝试访问“store.js”中的“可读”对象返回“未定义”
【发布时间】：2021-12-26 15:44:21
【问题描述】：

如下图所示，您可以访问普通的Object（这是意料之中的），但不能访问stores.js 内部的readable。

App.svelte

<script>
    import { myStuff, myStuff2 } from './stores.js';
</script>

<h1>This is {$myStuff.TEST}</h1>
<h1>This is {myStuff2.TEST}</h1>

stores.js

import { readable } from 'svelte/store';

export const myStuff = readable({
    TEST: "HELLO"
});

export const myStuff2 = {
    TEST: "HELLO 2"
};

// Doesn't work
console.log("TEST FROM STORE: " + myStuff.TEST);

// Works
console.log("TEST FROM STORE: " + myStuff2.TEST);

为什么会这样？

Tutorial 简短地提到你可能会得到一个undefiend，但它并没有详细说明过去，Docs 在撰写本文时没有提到可能的结果。

标记答案的示例截图：

【问题讨论】：

标签： javascript svelte

【解决方案1】：

存储在 Svelte 中的工作方式是它们将您的值包装在一个类中，该类没有直接获取存储值的方法。您需要订阅它才能获得它。还有一个 get 方法在后台执行相同的操作。

因此，在您的代码中，这将打印该值。它还会在更改时打印新值。

const unsub=mystuff.subscribe(val=> console.log("CURRENT VALUE OF TEST FROM STORE: " + val.TEST))
unsub()

//this does the same thing:
import { get } from 'svelte/store';
console.log("TEST FROM STORE: " + get(myStuff).TEST);

在 .svelte 文件中，$____ 表示法为您执行此订阅，以便更方便地使用它。

【讨论】：

【解决方案2】：

你可以使用get:

通常，您应该通过订阅来读取商店的价值并使用随时间变化的值。偶尔，你可能需要检索您未订阅的商店的值。 get 允许你这样做。

例如：

import { readable, get } from 'svelte/store';

console.log("TEST FROM STORE: " + get(myStuff).TEST);

【讨论】：