在商店的对象中调用方法属性的正确方法是什么？

Question

我正在开发我的第一个 Sveltekit 应用项目，从基于 React 的项目转换而来。我在商店内的一个对象中遇到了一些棘手的方法。在我将整个数据结构重构为可能更直观的东西之前（这仍然是一种源自 React 做事方式的数据结构），我想了解如何正确地执行此操作，以防我再次需要它。

一个对象存储一些关于数据集的元数据。

    const dataSetsIndex = [
    {id: ':sample:alphabet',
    permanent: true,
    metadata: {
        title: 'Alphabetic Letter Frequency',
        source: 'https://observablehq.com/@d3/bar-chart-transitions'
        },
        attachments: {
            data: import ('/src/dataSets/alphabet.json'),
        }
    }
]; 
export default dataSetsIndex;

在这个dataSetsIndex 组件属性中会有更多具有{ id: permanent: metadata: { title: source: } attachments: { data: ()=> } } 结构的对象。

但是当我的程序最终尝试从 Sveltekit 中路由上的外部 JSON ti 显示访问数据时，我似乎无法找到一种方法来使 import('/src/dataSets/alphabet.json') 方法中的 Promise 返回。

按照文档，我尝试了一个接口，它可以解构数据并将其存储在 writable 中 - JSON 文件中的数据是 fields:[] , rows:[]

import DataSets from "../dataSets/dataSetsIndex.js";
import {writable} from "svelte/store";

export const dataSetsStore = writable([]);

let destructedDataSets = () => {

    const dataSets = DataSets.map( ( dataset, index  ) =>
        {
            return {
                id: index,
                title: dataset.metadata.title,
                source:  dataset.metadata.source,
                fields: dataset.attachments.data().then(
                    (success) => { return success.fields},
                    (fail) => {return fail})
            }
        }
    )

    dataSetsStore.set(dataSets);
};

destructedDataSets();

然后将其引入响应式路由

<script>
    import {dataSetsStore} from "../stores/dataSetsStore.js"
</script>


{#each $dataSetsStore as metadataObject}
    <div>
        {metadataObject.title.toUpperCase()}
        {metadataObject.fields}
    </div>
{/each}

只显示ALPHABETIC LETTER FREQUENCY [object Promise]

我在这里错过了什么？

Answer 1

好的，所以我想通了，这是可行的。我查看了this related post 以帮助我了解 {#await} 在这个特定结构的上下文中的作用...我下面的代码摘录使用 Bulma 为结果绘制了一个表格 p>

<script>
    import {dataSetsStore} from "../stores/dataSetsStore.js"
</script>


    {#each $dataSetsStore as metadataObject}
        {#await metadataObject.importDataFrom()}
            <p>loading...</p>
            {:then theFields}
        <table class="table">
            <thead>{metadataObject.title.toUpperCase()}</thead>
                {#each theFields.fields as f}
                    <th>
                        <abbr class="has-background-success is-size-5 p-1" title={f.name}>
                            {f.name.trim().slice(0,10)}
                        </abbr>
                        <span class="has-text-info is-size-8">
                            {f.type}
                        </span>
                    </th>
                {/each}
        </table>
        {:catch error}
            <p>Something went wrong: {error.message}</p>
        {/await}
    {/each}