主页 / coding / 问题 / 79260991
Accepted
rodrigocfd
Asked: 2024-12-08 00:52:45 +0800 CST

如何在 Svelte 5 中使用全局 $derived？

  • 772

我正在尝试使用 Svelte 5 和符文创建一个全局状态：

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

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

我无法$derived工作：

Cannot export derived state from a module.

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

对全球的正确方法是什么$derived？

svelte

1 个回答

  1. Best Answer

    svelte.ts/svelte.ts 文件中的派生状态需要包装在类或函数中。

    班级

    您可以使用构造函数来设置初始状态，但这不在您的示例中，所以我没有将其包括在这里。

    类在编译时为每个属性添加 getter/setter。

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

    参考：https://svelte.dev/docs/svelte/$state#Classes

    功能

    需要使用 get() 从函数返回当前状态值，否则它将仅显示函数最初调用时的值。

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

    svelte 5 预览文档中有一个关于 get() 要求的参考，但在新文档中还没有找到它。

    • 1

相关问题