标签: svelte

目前正在制作一个 google chrome 扩展来可视化 svelte 组件，这只能用于开发模式。目前，我正在通过const svelteComponets = document.querySelectorAll(`[class^="svelte"]`);在内容脚本上使用来获取所有 svelte 组件，但它正在获取每个 svelte 元素。只获取组件的方法有哪些？

我正在创建一个自定义选择下拉组件，简化如下：

<script lang="ts">
    let optionsOpen: boolean = false;

    function onSelectClick(e) {
        optionsOpen = !optionsOpen;
        let p = e.target.closest('.select');
        let child = p.querySelector('.options');
        console.log(child);  //always null
    }
</script>


<div class="select" on:click={onSelectClick}>
    {#if optionsOpen}
        <div class="options">
            My Options
        </div>
    {/if}
</div>

从上面您将看到，当单击带有 .select 类的 div 时，选项容器将打开（通过 optionsOpen 变量）。

但是，在 onSelectClick 中，我需要在打开选项 div DOM 元素后访问它。我可以访问选择 div，但不能访问子选项 div，它总是返回 null。

我怀疑这可能是因为当我尝试访问它时，选项元素尚不可用，即使我在尝试访问之前将 optionsOpen 变量设置为。

有什么想法如何在选项 div 可见后访问它吗？

我想知道在 SvelteKit 中获取数据的最佳方法是什么，因为我在我的应用程序上遇到了以下问题。

我有一个可写商店，如下所示：

如您所见，我的商店没有初始值。然后在“+page.server.js”文件上执行数据获取逻辑：

然后，我循环查看商店中的待办事项并显示项目列表。问题是，在浏览器上第一次渲染时，我收到以下错误：

这有点道理，因为商店没有初始值。然后，我决定将存储的原始值更改为空数组（因为获取的数据进入数组），如下所示：

当我进行此更改时，UI 以正确的状态呈现（todos 存储已获取数据），不久之后，数据消失，我得到一个空数组。

这是 SvelteKit 的预期行为吗？如果我需要在服务器上获取数据，正确的数据获取方法是什么（我在数据库调用上有 API 密钥，所以我无法在客户端上获取数据，因为 Vite 会抛出错误）。

我在一个简洁的组件（）中创建了一个可读的存储，src/components/myComponent.svelte如下所示

import { readable } from "svelte/store";

export let data;

const mags = data.magazines;
export const allMags = readable(mags);

console.log($allMags) // correct output

我想将此商店导入到我的src/store.js文件中，以便我可以使用它来创建派生商店。我已经尝试过以下方法：

import { writable, readable, derived } from "svelte/store";
import { allMags } from "../src/components/myComponent.svelte";
// console.log($allMags)

我遇到了以下错误：

client.ts:112 SyntaxError: 请求的模块 '/src/components/myComponent.svelte?t=1696086887675' 未提供名为 'allMags' 的导出（位于stores.js?t=1696086887675:2:10）

显然，记录 $allMags 不起作用，我收到此错误：

|- ReferenceError: $allMags is not defined  
   at eval (src/stores.js:8:13)  
   at async instantiateModule (/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:54405:9)

Internal server error: $allMags is not defined

我认为（我是一个苗条的菜鸟）问题源于文件allMags中的导入store.js。这是不允许的吗？如果允许，我该如何修复导入语句？

我在 sveltekits 中不明白一件事。我将端点保存在 /routes/api/ 中。它们对于构建、生产中的用户来说是不可见的吗？在开发中，我可以通过浏览器或邮递员访问它们。安全吗？