使用 $ 符号访问 svelte 存储会导致引用错误

Question

我有一个store.js文件，其内容是：

\n

import { writable } from 'svelte/store';\nexport  const generateds = writable(0);\n\nconsole.log("generateds", $generateds)\n

\n

每次我尝试访问 $ generateds （在此文件内部或外部）时，我都会收到此错误：

\n

Uncaught ReferenceError: $generateds is not defined\n    at stores.js:4\n    at main.js:6\n

\n

当我在新项目中使用store时，没有问题。我找不到我当前项目的问题所在。

\n

这是我正在使用的 npm 包的列表：

\n

\xe2\x94\x80\xe2\x94\x80 @fortawesome/free-solid-svg-icons@5.14.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @material/layout-grid@7.0.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @mdi/js@5.9.55\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @rollup/plugin-commonjs@17.1.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @rollup/plugin-node-resolve@11.2.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @smui/button@1.0.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @smui/card@1.0.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @smui/drawer@1.0.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @smui/fab@1.0.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @smui/icon-button@1.0.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @smui/list@1.0.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @smui/select@1.0.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @smui/textfield@1.0.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @smui/top-app-bar@1.0.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @sveltejs/svelte-virtual-list@3.0.1\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 autoprefixer@9.8.6\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 dropzone@5.7.2\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 eslint-plugin-svelte3@2.7.3\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 eslint@7.9.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 firebase@7.24.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 firestore-export-import@0.10.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 mathlive@0.59.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node-sass@4.14.1\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 postcss@8.2.6\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 query-string@6.13.2\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 rollup-plugin-analyzer@4.0.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 rollup-plugin-css-only@3.1.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 rollup-plugin-livereload@2.0.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 rollup-plugin-postcss@4.0.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 rollup-plugin-sass@1.2.2\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 rollup-plugin-svelte@7.1.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 rollup-plugin-terser@7.0.2\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 rollup@2.39.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 sass@1.32.7\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 sirv-cli@1.0.11\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 svelte-fa@2.1.1\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 svelte-loading-spinners@0.1.1\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 svelte-materialify@0.3.5\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 svelte-preprocess@4.6.9\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 svelte-routing@1.5.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 svelte@3.32.3\n

\n

Answer 1

引用存储值的 $ 语法只能在 Svelte 组件内部使用。来自文档（强调我的）：

每当您引用商店时，您都可以通过在组件中添加 $ 字符作为前缀来访问其值。这会导致 Svelte 声明前缀变量，并设置一个商店订阅，该订阅将在适当时取消订阅。

如果您需要获取普通 JS 文件中的值，您可以订阅它或使用 Svelte 的get 函数（订阅存储以获取值并立即取消订阅）。

import { generateds }  from './store.js';
import { get } from 'svelte/store';

// method 1
const unsubscribe = generateds.subscribe((val) => { console.log(val); });
unsubscribe();

// method 2
console.log(get(generateds));