如何返回一个派生函数，该函数使用基于svelte/svelte工具包中另一个可写值的值从db提取的数据

Question

我正试图从store.js中的数据库中获取语言表的数据，并根据用户选择的语言修改该数据。因此，所选的语言是一个可写的变量，我需要获得一个派生函数来返回修改后的数据。这是我在store.js 中的代码

import { writable, derived } from 'svelte/store'; 
export async function getData(endpoint){
try {
const res = await axios.get(`${baseAPI}${endpoint}`);
return res.data;
} catch (e) {
return e;
}
}
function getTypography(lang){
let typography;
try {
const texts = getData('/language');
texts.then((data)=>{
typography = data.payload;
console.log(typography);
return filterTypography(typography, lang)
}).catch((e)=>{
console.log('error', e);
})        
} catch (error) {
console.log('error', error);
}
}
function filterTypography(typography, lang){
let textarray=[];
typography.forEach((element, index) => {
textarray[index]={
'keyword':element.keyword,
'value':element[lang]
}
});
return textarray
}
export const key = writable('en')
export const updateKey = (lang) => {
key.set(lang)
}
export const data = derived(key, $key => getTypography($key));

这是我的+page.svelte 中的代码

<script>
import { key, data, updateKey } from '$lib/store.js'

function changeLang(lang){
console.log("clicked with", lang);
updateKey(lang)
}

$: console.log($key)
</script>
<h1>{$data}</h1>
<button  on:click={() => changeLang('dk')} >Change to DK</button>
<button  on:click={() => changeLang('en')}>Change to EN</button>

我正在获取"未定义"的数据。我只是想打印出用于测试的数据变量。请注意，我从API端点获取数据后打印的控制台日志显示数据成功。另外，如果我只是在商店中使用一个函数，而不是getTyphography函数，它会根据所选的语言返回不同的静态数组，那么它的工作原理非常好。因此，据我所知，问题可能是从数据库中正确获取数据。我在这里能做什么？

Answer 1

派生存储在此上下文中没有意义，因为数据是异步更新的。问题是getTypography没有返回任何内容，而是在data中使用，就好像是这样。

只需将data设置为writable，并在语言发生变化时进行更新。即使用类似的东西

key.subscribe($key => updateData($key))

其中updateData函数类似于getTypography，但设置data存储。

类似于：

const data = writable([]);
async function updateData(lang) {
try {
const languageData = await getData('/language');
const typography = languageData.payload;
data.set(filterTypography(typography, lang));
}
catch (error) {
console.log('error', error);
}
}

(您可能需要添加额外的逻辑来使以前的请求无效，以防止出现竞争条件。(

---

如果同时请求所有语言的数据，则可以异步更新基本存储，并仅使用derived存储进行筛选。它应该基于语言(key(和使用所有语言数据更新的存储。

原理示例：

import { writable, derived } from 'svelte/store';
const key = writable('en');
const allData = writable({});
const data = derived([allData, key], ([$allData, $key]) => {
return $allData[$key]; // Filter data based on language
});

REPL-

---

您也可以重写getTypography以实际返回它在内部创建的promise，但在使用data的任何地方都必须使用类似{#await}的东西。

async function getTypography(lang) {
try {
const data = await getData('/language');
const typography = data.payload;
return filterTypography(typography, lang);
}
catch (error) {
console.log('error', error);
// If you do not return anything here, the awaited store will be `undefined`
}
}