feat(projects): add pinia setup syntax example: setup-store[添加setup syntax的pinia示例setup-store]

src/store/index.ts

@@ -1,9 +1,12 @@
 import type { App } from 'vue';
 import { createPinia } from 'pinia';
+import { resetSetupStore } from './plugins';
 
 /** setup vue store plugin: pinia. - [安装vue状态管理插件：pinia] */
 export function setupStore(app: App) {
   const store = createPinia();
+  store.use(resetSetupStore);
+
   app.use(store);
 }
 

src/store/modules/index.ts

@@ -3,3 +3,4 @@ export * from './theme';
 export * from './auth';
 export * from './tab';
 export * from './route';
+export * from './setup-store';

src/store/modules/setup-store/index.ts

@@ -0,0 +1,26 @@
+import { reactive } from 'vue';
+import { defineStore } from 'pinia';
+import { useBoolean } from '@/hooks';
+
+export const useSetupStore = defineStore('setup-store', () => {
+  const { bool: visible, setTrue: show, setFalse: hide } = useBoolean();
+
+  interface Config {
+    name: string;
+  }
+
+  const config = reactive<Config>({ name: 'config' });
+
+  /** 设置配置 */
+  function setConfig(conf: Partial<Config>) {
+    Object.assign(config, conf);
+  }
+
+  return {
+    visible,
+    show,
+    hide,
+    config,
+    setConfig
+  };
+});

src/store/plugins/index.ts

@@ -0,0 +1,21 @@
+import type { PiniaPluginContext } from 'pinia';
+import { cloneDeep } from 'lodash-es';
+
+/**
+ * setup语法的重置状态插件
+ * @param context
+ * @description 请将用setup语法的状态id写入到setupSyntaxIds
+ */
+export function resetSetupStore(context: PiniaPluginContext) {
+  const setupSyntaxIds = ['setup-store'];
+
+  if (setupSyntaxIds.includes(context.store.$id)) {
+    const { $state } = context.store;
+
+    const defaultStore = cloneDeep($state);
+
+    context.store.$reset = () => {
+      context.store.$patch(defaultStore);
+    };
+  }
+}