Pinia：使用设置语法时的 $reset 替代方案

Question

我创建了一个 pinia 商店，其设置语法如下：

defineStore('id', () => {
  const counter = ref(0)
  
  return { counter }
})

设置语法的一切都很好，因为我可以重复使用其他 pinia 商店。

但是，现在我看到需要在其他页面上重新使用 Pinia 商店，但需要重置它们的状态。

例如，在 Vuex 中，我使用 registerModule 和 unregisterModule 来实现拥有一个新鲜的商店。

所以问题是：如何使用设置语法重置 pinia 存储？

注意：我知道我可以通过创建一个将所有状态值设置为初始值的函数来手动完成

注2：我找到了$dispose，但是没有用。如果 $dispose 是答案，那么它如何在 2 个组件之间重置存储？

Answer 1

您可以使用 Pinia plugin 为所有商店添加 $reset() 功能：

在 Pinia 实例上，使用接收 store 属性的函数调用 use()。此功能为Pinia插件。
Deep-copy store.$state作为初始状态。对于包含嵌套属性或复杂数据类型的状态，建议使用 lodash.clonedeep 等实用程序，例如 Set.
将store.$reset()定义为一个调用store.$patch()的函数，其初始状态为deep-clone。为了删除对副本本身的引用，再次 deep-clone 状态很重要。

// store.js
import { createPinia } from 'pinia'
import cloneDeep from 'lodash.clonedeep'

const store = createPinia()
1️⃣
store.use(({ store }) => {
  2️⃣
  const initialState = cloneDeep(store.$state)
  3️⃣
  store.$reset = () => store.$patch(cloneDeep(initialState))
})

demo

欢迎阅读基于此答案的文章：How to reset stores created with function/setup syntax

Pinia：使用设置语法时的 $reset 替代方案

Pinia: $reset alternative when using setup syntax

vue.js

vuejs3

vite

pinia

所以问题是：如何使用设置语法重置 pinia 存储？