主页 / coding / 问题 / 79296004
Accepted
ZYinMD
Asked: 2024-12-20 09:46:26 +0800 CST

绑定到 svelte5 中导入的 $state（错误“constant_binding”）

  • 772
// states.svelte.js
export let name = $state("John"); // a state to be shared by multiple components

<!-- Component.svelte -->
<script>
  import { name } from "./states.svelte.js";
</script>

<p>Hello, my name is <input type="text" bind:value={name} /></p>

重新编译

当迁移到 svelte5 时，我尝试用$state替换可写存储，但出现错误。Cannot bind to import (https://svelte.dev/e/constant_binding)

正确的做法是什么？

svelte

2 个回答

  1. Best Answer

    我只能给出解决方案，但不能给出原因：当使用符文进行共享状态时，它们应该位于一个对象中：

    export const user = $state({
  name: 'John',
});

    和：

    <script>
  import { userState } from "./states.svelte.js";
</script>

<p>Hello, my name is <input type="text" bind:value={user.name} /></p>

    不幸的是，文档没有明确说明这样做的必要性以及原因。我还想知道这是技术上的还是哲学上的强加。我知道可观察变量不能很好地处理原始值，因为它们是按值复制的，所以这可能是技术问题。

    • 2

  2. 您不能修改原语，并且导入被视为常量，因此需要包装该值，然后您可以修改保存该值的属性，例如

    export let name = $state({ current: "John" });

    然后绑定到name.current。

    （供参考，另请参阅svelte/reactivity/window模块，它公开了各种原语，每个对象都具有一个current属性来保持反应性。）

    • 2

相关问题