Início / coding / Perguntas / 79296004
Accepted
ZYinMD
Asked: 2024-12-20 09:46:26 +0800 CST

Vincular ao $state importado no svelte5 (erro "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>

REPL

Ao migrar para o svelte5, tento substituir um armazenamento gravável por um $state , mas recebo erro Cannot bind to import (https://svelte.dev/e/constant_binding).

Qual é a maneira correta de fazer isso?

svelte

2 respostas

  1. Best Answer

    Só posso dar a solução, mas não o porquê : ao usar runas para estado compartilhado, elas devem estar em um objeto:

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

    e:

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

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

    Infelizmente, os documentos não deixam claro que isso é necessário e por quê. Eu também estaria interessado em entender se é uma imposição técnica ou filosófica. Eu sei que observáveis ​​não funcionam bem com valores primitivos, pois são copiados por valor, então pode ser técnico.

    • 2

  2. Você não pode modificar primitivos e as importações são tratadas como constantes, então o valor precisa ser encapsulado, então você pode modificar a propriedade que contém o valor, por exemplo

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

    Então vincule a name.current.

    (Para referência, veja também o svelte/reactivity/windowmódulo , ele expõe vários primitivos, cada um em um objeto com uma currentpropriedade para preservar a reatividade.)

    • 2

relate perguntas