Question

我想知道我是否可以从一个普通的.js文件访问我的 Svelte 存储值。

我正在尝试编写基于存储值返回动态值的函数，以将其导入任何组件中。但是，在一个普通的.js文件中，我不能只使用$符号访问存储值。

使用存储值并可以在多个组件上使用的基本函数的快速示例：

//in .svelte

function add() {
    $counter = $counter + 1;
 }

编辑：稍微改一下

编辑： 找到了解决方案，但我真的不知道它是否真的经过优化。.

//in .js file

import { get } from "svelte/store";
import { counter } from "./stores";

export function add() {
    var counterRef = get(counter);
    counter.set(counterRef + 1);
}

Answer 1

是的，绝对。

一方面，商店API非常简单，没有什么可以阻止您自己订阅商店以了解其价值：

import myStore from './stores'

myStore.subscribe(value => {
  // do something with the new value
  // you could store it for future reference...
})

此外，如果您只是想知道当前值，Svelte可以使用get函数来帮助您：

import { get } from 'svelte/store';

import myStore from './stores'

const value = get(myStore);

Answer 2

除了rixo的答案外，实现add的更好方法是使用商店的update方法：

import { counter } from "./stores";

export function add() {
    counter.update(n => n + 1);
}

您还可以创建一个实现该逻辑的this。

Answer 3

这并不是您要求的（导入），但是此方法具有相同的目的：您将商店作为参数传递，因此无需导入.js您的商店

import {get} from 'svelte/store'
export function add(yourStore) {
   let _yourStore = get(yourStore)
   yourStore.set(_yourStore + 1)
}

然后，您只需将商店导入到Svelte组件中即可。
它允许您不在乎.js中的商店导入，而仅在您的组件上。

Answer 4

许多Svelte商店示例都不使用对象，因此这就是我的工作方式。这使用异步获取将用户的语言环境更新为0。想象pstats = {uid: 1, locale: 5} ...

import { pstats} from './stores.js'

export async function leave_locale() {
   return fetch(`./builds/leave`, {method: 'get'})
          .then(res => res.json())
          .then(res => {
                pstats.update((theStore) => {
                    return Object.assign(theStore, {locale: 0});
                })
            })
}

是否可以从外部js文件访问Svelte商店？

4 个答案: