svelte 中使用 $state 来创建一个响应式的状态变量。通过 $state 创建的变量可以在组件中直接使用，并且当其值发生变化时，组件会自动重新渲染。

示例

<script>
  const name = $state("Alice")
</script>

<h1>{name}</h1>

如果我们需要对这个变量进行修改，他会自动触发组件的重新渲染。

不过我们不需要使用一些像 setState 这样的函数来修改状态变量，只需要直接赋值即可。

<script>
  // 注意这里已经是 let 了, 如果使用 const 即便这个变量是响应式的, 也无法修改它的值
	let name = $state('name');

	function handleClick() {
		console.log('Button clicked!');
		name = 'New Name';
	}
</script>

{name}

<button onclick={handleClick}>Click me</button>

编辑此页