Início / coding / Perguntas / 79260991
Accepted
rodrigocfd
Asked: 2024-12-08 00:52:45 +0800 CST

Como usar um $derived global no Svelte 5?

  • 772

Estou tentando criar um estado global com Svelte 5 e runas :

// store.svelte.ts
export const person = ({
    name: '',
});

export const mrName = $derived('Mr. ' + person.name); // <-- problem!

Não consigo $derivedir trabalhar:

Cannot export derived state from a module.

6 |  export const mrName = $derived("Mr. " + person.name);
                                                           ^
7 |

Qual é a abordagem correta para um global $derived?

svelte

1 respostas

  1. Best Answer

    O estado derivado nos arquivos svelte.ts/svelte.ts precisa ser encapsulado em uma classe ou função.

    Aula

    Você pode usar um construtor para definir o estado inicial, mas isso não estava no seu exemplo, então não o incluí aqui.

    As classes adicionam getters/setters para cada propriedade quando ela é compilada.

    // store.svelte.ts
export class Person {
  name = $state('')
  mrName = $derived("Mr. " + this.name)
}

    Referência: https://svelte.dev/docs/svelte/$state#Classes

    Função

    É necessário usar get() para retornar os valores do estado atual da função, caso contrário, ela mostrará apenas os valores no momento em que a função foi chamada inicialmente.

    // store.svelte.ts
export const Person = () => {
  let name = $state('')
  let mrName = $derived("Mr. " + name)
  return {
    get name() { return name },
    get mrName() { return mrName }
  }
}

    Havia uma referência ao requisito get() nos documentos de visualização do Svelte 5, mas ainda não a encontrei nos novos documentos.

    • 1

relate perguntas