vue.js - Pinia:使用设置语法时的 $reset 替代方案

Question

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

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

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

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

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

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

注意:$reset() 方法仅针对使用对象语法定义的商店实现，因此这不是一个选项。

注意 2:我知道我可以通过创建一个函数来手动完成此操作，您可以在该函数中将所有状态值设置为其初始值

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

Answer 1

您可以使用 Pinia plugin为所有商店添加一个 $reset() 函数:

1. 在 Pinia 实例上，调用 use()具有接收 store 属性的函数。这个函数是一个 Pinia 插件。

2. 深度复制 store.$state 作为初始状态。类似 lodash.clonedeep 的实用程序建议用于包含嵌套属性或复杂数据类型的状态，例如 Set。

3. 将 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