在 post 个新项目加入数据库后更新组件

Question

我正在玩 Sveltekit，我有点挣扎..

所以我的问题是，当我向数据库添加一些东西时它可以工作，但新项目不会显示在列表中，直到我刷新页面。我的代码如下所示：

index.js

import { connectToDatabase } from '$lib/db';

export const post = async ({ request}) => {

    const body = await request.json()
    console.log(body)

    const dbConnection = await connectToDatabase();
    const db = dbConnection.db;
    const einkaufszettel = db.collection('Einkaufszettel')

    await einkaufszettel.insertOne({
        name: body.newArticle
    });

    const einkaufsliste = await einkaufszettel.find().toArray();

    return {
        status: 200,
        body: {
            einkaufsliste
        }
    };

}


export const get = async () => {

    const dbConnection = await connectToDatabase();
    const db = dbConnection.db;
    const einkaufszettel = db.collection('Einkaufszettel')
    
    const einkaufsliste = await einkaufszettel.find().toArray();

    console.log(einkaufsliste)

    return {
        status: 200,
        body: {
            einkaufsliste,
        }
    };

}

和index.svelte

的脚本

<script>
    import Title from '$lib/title.svelte'
    export let einkaufsliste = []
    let newArticle = ''

    const addArticle = async () => {

        const res = await fetch('/', {
            method: 'POST',
            body: JSON.stringify({
                newArticle
            }),
            headers: {
                'Content-Type': 'application/json'
            }
        })

        fetchArticles()
    }

    async function fetchArticles() {
        const res = await fetch('/')
        console.log(res.body)
    }

</script>

在“网络预览”选项卡中，新项目已添加到列表中。

Answer 1

您可以 read here，您需要在从 API 中获取元素列表后重新分配 einkaufsliste。

您可以在 fetchArticles 方法中执行此操作，如下所示：

async function fetchArticles() {
  einkaufsliste = await fetch('/')
}

在 post 个新项目加入数据库后更新组件

Update Component after post new item to the Database

reload

fetch

svelte

sveltekit