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

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()为所有商店添加功能：

\n

\n

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

   \n
\n

2. 深复制store.$state作为初始状态。lodash.clonedeep对于包含嵌套属性或复杂数据类型（例如Set.

   \n
\n

3. 定义store.$reset()为一个函数，调用store.$patch()上面的初始状态的深度克隆。

   \n
\n

4. 我们使用Object.assign它来使其与对象正常工作，请参见此处。pinia 在定义$resetOptions API时的做法与此相同。

   \n
\n

\n

// store.js\nimport { createPinia } from \'pinia\'\nimport cloneDeep from \'lodash.clonedeep\'\n\nconst store = createPinia()\n1\xef\xb8\x8f\xe2\x83\xa3\nstore.use(({ store }) => {\n  2\xef\xb8\x8f\xe2\x83\xa3\n  const initialState = cloneDeep(store.$state)\n  3\xef\xb8\x8f\xe2\x83\xa3\n  store.$reset = () => {\n    store.$patch($state => {\n      4\xef\xb8\x8f\xe2\x83\xa3\n      Object.assign($state, initialState)\n    })\n  }\n})\n

\n

演示

\n\n

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

\n