为Svelte商店提取可重复使用的getter的最佳实践

Question

为存储提取更新函数很容易，但有没有一种简单的方法可以提取getter。我正在尝试做这样的事情，我可以在多个地方重用getter函数。我想我仅有的两个解决方案是为每个getter创建一个派生存储，还是将存储合并为一个自定义存储？

export function enableAll () {
if (enableAllAllowed()) {
storeA.update(current => { ...current, enabled: true });
storeB.update(current => { ...current, enabled: true });
storeC.update(current => { ...current, enabled: true });
}
}
export function enableAllAllowed () {
return get(StoreA).available && get(StoreB).available && get(StoreC).available && get(StoreD).canEnableAll;
}
<Component1>
<button disabled={!enableAllAllowed()} on:click={enableAll}>
Enable All
</button>
</Component1>
<Component2>
<button disabled={!enableAllAllowed()} on:click={enableAll}>       
Enable All
</button>
</Component2>

Answer 1

也许答案有点晚，但有很多方法可以获得商店的价值。并不是所有的都可以重复使用，正如问题中所要求的那样，但我认为这可能对一些人有用。

获取存储值最常见的方法是订阅它。有两种方法。一个是使用$Syntax

import { writable } from 'svelte/store';
const numberStore = writable<number>(1);
$numberStore; // Should return 1

另一个正在取消订阅功能

import { writable } from 'svelte/store';
const numberStore = writable<number>(1);
let value;
numberStore.subscribe(storeValue => value = storeValue)
value; // Should return 1

这适用于*.svelte文件，但不适用于.js/.ts文件。幸运的是，还有另外两种方法可以做到这一点。

一种方法是使用svelte/store get函数。

import { writable, get } from 'svelte/store';
const numberStore = writable<number>(1);
get(numberStore); // Should return 1

另一种方法是在自定义存储中编写getter函数。(贷记至：https://svelte.dev/repl/2991d70689674f50a5fb3e30216d699e?version=3.24.1)

import {writable} from "svelte/store"
function createStore() {
const { set, subscribe } = writable('PRE_GAME');
let state
subscribe((v)=>state=v)
return {
subscribe,
set,
preGame: (state) => state === 'PRE_GAME',
inGame: () => state === 'IN_GAME',
postGame: () => gamestate === 'POST_GAME',
};
}
export const gamestate = createStore();