PINIA：使用设置语法时$重置替代方案

Question

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

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

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

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

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

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

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

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

注3：我发现$dispose 但它不起作用。如果 $dispose 是答案，那么它如何重置两个组件之间的存储？

Answer 1

您可以使用 Pinia 插件 添加 $reset()< /code> 函数到所有商店：

1. 在 Pinia 实例上，调用 use() 与接收 store 属性的函数。该功能是一个 Pinia 插件。

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

3. 将 store.$reset() 定义为调用 store.$patch() 具有上面初始状态的深度克隆。

4. 我们使用Object.assign使其与对象正常工作请参阅此处。当 定义 $ 时，pinia 也会以同样的方式执行自身操作重置选项 API。

// 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($state => {
      4️⃣
      Object.assign($state, initialState)
    })
  }
})

演示

---

随意阅读基于此答案的文章：如何重置使用函数/设置语法创建的存储< /a>

Answer 2

您可以按照此处文档中的建议执行此操作

myStore.$dispose()

const pinia = usePinia()

delete pinia.state.value[myStore.$id]