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

Posted

技术标签:

【中文标题】是否可以从外部 js 文件访问 Svelte 商店?【英文标题】:Is it possible to access Svelte store from external js files? 【发布时间】:2020-03-26 07:51:13 【问题描述】:

我想知道我是否能够从一个普通的 .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);

【问题讨论】:

【参考方案1】:

是的,绝对的。

一方面,store API 非常简单,没有什么可以阻止您自己订阅 store 以了解其价值:

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);

【讨论】:

哦,非常感谢! subscribe 方法对我来说效率更高:) get() 方法触发了我的大脑并解决了我的问题。谢谢!【参考方案2】:

除了rixo的回答,更好的实现add的方法是使用商店的update方法:

import  counter  from "./stores";

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

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

【讨论】:

【参考方案3】:

这不完全是您要求的(导入),但此方法具有相同的目的: 您将商店作为参数传递,因此无需在 .js 中导入您的商店

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

然后您只需将您的商店导入您的 Svelte 组件。 它允许不关心 .js 中的商店导入,而只关心您的组件。

【讨论】:

【参考方案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 商店?的主要内容,如果未能解决你的问题,请参考以下文章

如何用 Svelte 处理相关商店

Svelte 商店有条件的自动订阅

从外部 JS 文件中获取表单

如何在 vue.js 应用程序中访问外部 json 文件对象

是否有可以从外部访问的完整 Nextcloud API?

无法从 TS 文件访问外部 JS 文件的功能