状态管理

约 339 字大约 1 分钟

2026-09-20

在 svelte 中可以通过一个 xxx.svelte.ts 的文件来创建一个状态的容器

/src/store/state.svelte.ts

export function createState() {
  let value = $state(0)

  function up() {
    value += 1
  }

  return {
    // 这里必须使用 get 和 set 来定义 value, 否则在组件中使用时不会触发更新
    get value() {
      return value
    },
    up
  }
}

/src/state.svelte

<script lang="ts">
  import { createState } from './store/state.svelte.ts'

  const state = createState()
</script>

{state.value}

<button onclick={state.up}>up</button>

当然你也可以使用类来简化前面的 getter 和 setter 的写法, 但是需要注意的是, 在类中使用 getter 和 setter 时, 需要使用 this 来访问类的属性, 否则会报错.

export class UserStore {
  value = $state(0)

  up() {
    this.value += 1
  }
}

不过在调用这个 up 函数的时候, 就不能直接使用 state.up() 的方式来调用了, 因为 this 的指向会发生变化, 所以需要使用 bind 来绑定 this, 或者使用箭头函数来定义 up 函数.

<button onclick={state.up}>up (not working)</button>
<button onclick={()=>state.up()}>up (working)</button>

当然我们还需要注意，现在这里每次去实例化或调用创建函数都会创建一个全新的状态，我们可以在ts文件中导出一个变量，后续都使用这个变量，就可以实现多组件之间的状态传递，因为他们用的都是一个容器。