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

【问题标题】：Pinia: $reset alternative when using setup syntaxPinia：使用设置语法时的 $reset 替代方法
【发布时间】：2022-07-26 09:15:13
【问题描述】：

我有一个使用如下设置语法创建的 pinia 商店：

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

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

然而，现在我发现需要在其他页面上重复使用 Pinia 商店，但它们的状态需要重置。

例如，在 Vuex 中，我使用 registerModule 和 unregisterModule 来实现拥有新鲜存储。

所以问题是：如何使用设置语法重置松树商店？

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

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

【问题讨论】：

这个库github.com/huybuidac/vuex-extensions支持重置功能。只需 $store.reset()
@HuyBuiDac 那个库是给 Vuex 的，但是这个问题是关于 Pinia 的。

标签： vue.js vuejs3 vite pinia

【解决方案1】：

您可以使用Pinia plugin 将$reset() 函数添加到所有商店：

在 Pinia 实例上，使用接收 store 属性的函数调用 use()。这个函数是一个Pania插件。
深拷贝store.$state 作为初始状态。对于包含嵌套属性或复杂数据类型（例如 Set）的状态，建议使用像 lodash.clonedeep 这样的实用程序。
将store.$reset() 定义为调用store.$patch() 的函数，并从上面深度克隆初始状态。再次深度克隆状态以删除对副本本身的引用非常重要。

// 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

【讨论】：

【解决方案2】：

注意 tony19 选择的解决方案。如果您有未导出的状态，这将不起作用。例如：https://stackblitz.com/edit/vue3-reset-pinia-store-hurxlb?file=src/components/MyComponent.vue

【讨论】：