pinia本身提供了一个reset方法,可以重置store
store.$reset()
但是在项目中应用setup语法的时候会抛出错误,网上找了方法解决了问题,现整理一下
分析原因
根据报错可以理解,因为setup写法中 storer 的 $reset 方法未实现,那顺着这个思路就需要自己手动实现一下
实现方式
pinia支持自定义插件,因此通过插件将自定义的$reset方法写入
const store = createPinia();
// 手动重置
const resetPlugin = (plugin) => {
const { store, options } = plugin;
// 备份初始值
const initialState = JSON.parse(JSON.stringify(store.$state));
// 重置
store.$reset = () => {
store.$state = JSON.parse(JSON.stringify(initialState));
};
};
store.use(resetPlugin);
其它问题
1、有的文章推荐使用store.$patch()
方法实现,实际项目中有个别值未重置,原因暂时未知,因此目前还是用上述代码实现
2、持久化
项目中使用了pinia-plugin-persist进行部分字段持久化,遇到pinia重置了但localStorage未重置,排查了好久才解决,真相令人暖心:只需要将pinia-plugin-persist
在resetPlugin
之后挂载就可以了
store.use(resetPlugin);
store.use(piniaPluginPersist);