我目前正在学习 Svelte，我想为这个副项目创建一个身份验证流程。通常，在 React 中，我习惯使用上下文保存身份验证信息。
<AuthContext>
<App />
<AuthContext>
我想知道 Svelte 是否也可以执行类似的方法？所有教程都是基于组件的上下文。我想在我的应用程序中调用 getContext('authContext') 。
AuthContext.svelte
<script lang='ts'>
import { writable } from 'svelte/store'
import { onDestroy, setContext } from 'svelte'
import {getAuth, type User, onAuthStateChanged} from 'firebase/auth'
const auth = getAuth()
const userStore = writable<User | null>(null)
const isLoggedIn = writable<boolean>(false)
const contexts = {
isLoggedIn,
userStore,
logOut,
}
const unsubscribe = onAuthStateChanged(auth, (user) => {
if(user) {
userStore.set(user)
isLoggedIn.set(true)
}
})
setContext('authContext', contexts)
function logOut() {
auth.signOut()
isLoggedIn.set(false)
}
onDestroy(() …我正在尝试在代码中使用在 onmount 中创建的 const 作为 {myip}，我不知道如何从 onmount 中提取它
<script>
import { page } from '$app/stores'
import axios from 'axios'
import { onMount } from 'svelte'
onMount(async () => {
const firstip = await axios.get(`https://geolocation-db.com/json/`)
const finalip = await axios.get(`https://api.ipregistry.co/` + `${firstip.data.IPv4}` + `?key=6nn8zr4k2h34cwkw32`)
if (!finalip.data.carrier.name) {
const myip = finalip.data.location.city
console.log(myip)
} else {
const myip = '7 km'
console.log(myip)
}
})
const { id } = $page.params
console.log(id)
const name = id.charAt(0).toUpperCase() + id.slice(1)
</script>
我想提取“myip”并在 onmount 之外使用它谢谢
在新的 svelteKit 中，我无法上传带有表单 multipart/form-data 和多个属性的多个文件
+页面.svelte
<form
action="?/add"
method="post"
enctype="multipart/form-data"
>
<input
multiple
type="file"
name="file"
id="file"
accept="image/*"
/>
+页面.server.js
export const actions = {
add: async ({ request, files }) => {
const data = await request.formData()
const file = data.get('file')
let filename
try {
if (file) {
const ext = file.name.split('.').pop()
filename = userName + '-' +Date.now().toString() + '.' + ext
let ab = await file.arrayBuffer()
console.log(Array.from(ab));
writeFileSync(`static/img/${filename}`, Buffer.from(ab, (e) => {
console.log(e)
}))
}
return { success: true …我使用 Sveltekit 并将一些图像放入静态文件夹中。静态 > 图像 > image1.png 等
在源代码 src 中，我有一个名为 的文件夹lib，在lib一个名为 的文件夹内components，有一个文件Footer.svelte。在该文件中，我想引用我的 image1 （它的绝对路径为~/myapp/static/images/image1.png。即使当我尝试此路径时，它也会抛出错误。
所以：
src > lib > components > Footer.svelte
static > images > image1.png
src和都static位于 的根目录中myapp。
我的这一行Footer.svelte：
import Image from '~/myapp/static/images/image1.png';
Footer.svelte我的抓取正确的路线是什么image1.png？
请参阅问题描述。
我正在尝试将 sveltekit 应用程序部署到 firebase（带有 sveltekit 的 bigginner）。我假设我们将构建应用程序并获取我们的 index.html 文件，但 sveltkit 的情况并非如此。
我正在使用 svelte 自动适配器（我的情况需要）
“苗条”：“^3.46.0”
现在我尝试将 firebase 配置文件更新为这样
{
"hosting": {
"public": "src",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
},
"rewrites": [
{
"source": "**",
"destination": "/src/app.html"
}
]
}
还根据 firebase文档中托管顺序的优先级中托管顺序的优先级 ，我删除了由 firebase 填充的 index.html 文件，但仍然无法正常工作，并且出现页面未找到错误：此文件不存在，并且在当前目录。
知道我错过了什么吗？
这将像on:change事件一样。
我没有使用此事件，因为在某些小型库中不会发出此事件，并且暗示是使用绑定和$.
然而，Svelte 似乎没有一个干净的语法。
我只能想到类似的东西
$: {
if (variable) {
doSomething();
}
}
其中每次variable的值发生变化，doSomething()都会运行。
但是语句的使用if很奇怪..如果variable是布尔值怎么办？这样，当变量的值为 false 时，函数将不会运行。
这个想法是在每次变量值发生变化时运行该函数，无论新值实际是什么。
我也尝试过
$: doSomething(variable);
它可以工作，但也很奇怪，因为该函数doSomething可能不需要参数。在这种情况下，参数纯粹是为了添加variable作为此$语法的依赖项......
还尝试了/sf/answers/3989126851/中的答案，但这根本不起作用。文档（/sf/answers/3989126851/）中也没有提到它。
提前致谢！
我正在使用 sveltekit，我想知道如何导入图像并在 CSS 背景属性中使用它。
这是我尝试过的：
<script>
import img from '$lib/images/background-shaded.jpg';
</script>
<div>
<h1>Hello World</h1>
</div>
<style>
div {
background-image: url({img});
}
</style>
现在，我只是将图像放在静态文件夹中并通过它的 URL 使用。也许这就是推荐的方法......
谢谢。
我是 sveltekit 的新手，
我的主要问题是：用 SvelteKit 将图像放在哪里？以及如何使用它。在静态文件夹中，对吗？
但这会导致一个问题：当在此路线中：“@domain/dashboard”时，我使用以下代码：
<img src="user.png" />
它尝试在@domain/user.png 中找到它，一切正常！但是当我使用这条路线：@domain/users/1时，它会尝试在@domain/users/user.png（除了@domain/user.png）中找到它。
请帮我。
ps：我看到有一些主题建议使用这样的东西：
import logo from '$lib/assets/user.png';
所以如果我将图像复制到 lib 文件夹中，静态文件夹的原因是什么？
示例项目： https: //github.com/kevinrenskers/slug。
基本上我有一条路线/[slug]，代码如下：
// +page.svelte
<script lang="ts">
import type { PageData } from "./$types";
export let data: PageData;
const { slug } = data;
</script>
{slug}
// +page.ts
import type { PageLoad } from "./$types";
export const load: PageLoad = async ({ params }) => {
const slug = params.slug;
return {
slug,
};
};
在我的+layout.svelte文件中，我有一个非常简单的导航：
// +layout.svelte
<a href="/a">A</a> <a href="/b">B</a> <a href="/c">C</a>
<div>
<slot />
</div>
问题是，当您在三个页面之间单击时，页面的内容不会改变。因此，如果您从主页转到 A，它会显示 A，但如果您随后单击 B 或 C，它仍然会显示 …
我想创建一个可以处理on:click但不导出handleClick函数的组件；这就是现在的运作方式
button.svelte：
<script lang="ts">
export let handleClick: ((e: MouseEvent) => void ) | undefined = undefined
</script>
<button on:click={handleClick}>
<slot></slot>
</button>
app.svelte：
<script lang="ts">
import Button from '$lib/button/button.svelte'
</script>
<Button handleClick={() => console.log('click!')}>
Click me!
</button>
如何更改 Button 元素以on:click直接在应用程序组件中使用？
app.svelte：
<Button on:click={handleClick}>
<slot></slot>
</Button>