修复pinia使用setup语法导致$reset报错

前言

在pinia中使用setup语法是非常舒服的一件事情，但是也会有一些坑点，其中就是当我们使用store.$reset()进行重置的时候会发生报错：

Store "xxxx" is built using the setup syntax and does not implement $reset()

意思是$reset并没有实现，我们需要自己手动实现这个。

教程

解决办法我是从stackoverflow看到的，这里放出出处：

《Pinia: $reset alternative when using setup syntax》

我们需要创建一个插件去实现这个功能：

stores/plugins/reset.ts

import type { PiniaPlugin } from "pinia";
import { easyDeepClone } from "@/utils/tools";

export const piniaReset: PiniaPlugin = ({ store }) => {
    const initialState = easyDeepClone(store.$state);
    store.$reset = () => {
        store.$patch(($state) => Object.assign($state, initialState));
    };
};

其中easyDeepClone是我自己写的一个简单深拷贝函数，内容如下：

/** 简易深度克隆 */
export function easyDeepClone<T = any>(target: T): T {
    return JSON.parse(JSON.stringify(target));
}

修复的原理就是利用$patch整个更新state对象，其中我们甚至可以简化写法：

store.$patch(initialState);

这种形式也是可以的。

然后将插件注册激活：

import { createPinia } from "pinia";
import { piniaReset } from "./plugins/reset";

const pinia = createPinia();
// 修复setup模式$reset无效的问题
pinia.use(piniaReset);

export default pinia;

问题解决。