Pinia中如何正确重置store状态？

宇文星星提问于 2026-02-25 09:11:18 阅读 14

框架

我在用Pinia写一个表单页面，提交后想把store里的状态清空，但直接赋值好像没生效。

试过在action里写 state = initialState，但数据还是没变，控制台也没报错，就是不更新。是不是得用别的方法？

我的store是这样写的：

export const useFormStore = defineStore('form', {
  state: () => ({
    name: '',
    email: '',
    message: ''
  }),
  actions: {
    reset() {
      // 这样写不起作用
      this.$state = { name: '', email: '', message: '' }
    }
  }
})

我来解答赞 6 收藏

反馈

1 条解答

雯婧 ☘︎ Lv1

改一下就行，Pinia 的 store 不能直接给 this.$state 赋值，它不是响应式对象，得用 $reset() 方法或者手动一个个字段重置。

最简单的办法，直接调用 Pinia 提供的内置方法 $reset()：

export const useFormStore = defineStore('form', {

  state: () => ({

    name: '',

    email: '',

    message: ''

  }),

  actions: {

    reset() {

      this.$reset()

    }

  }

})

或者你也可以自己手动重置，但必须用 Object.assign 或者逐个字段赋值，不能整个对象替换：

export const useFormStore = defineStore('form', {

  state: () => ({

    name: '',

    email: '',

    message: ''

  }),

  actions: {

    reset() {

      this.name = ''

      this.email = ''

      this.message = ''

    }

  }

})

别写 this.$state = {}，这种赋值不会触发响应式更新，Vue 根本不知道状态变了，界面自然不刷新。

再补充一句，如果你用的是组合式写法（defineStore 里用函数返回 state），那 $reset() 是最省心的，它会自动还原到初始 state，不用自己写一堆赋值。

2026-02-25 10:05