From f3641d1f98976e0067a6a26c76ded73a4e883eb6 Mon Sep 17 00:00:00 2001
From: L&H <abc@hub.moe>
Date: Tue, 19 Dec 2023 10:56:27 +0800
Subject: [PATCH] chore: using pinia implement global store

---
 apps/vue-demo/src/app.ts                      |  3 ++-
 .../src/component/pinia/PiniaThemeSwitch.vue  |  6 +++---
 apps/vue-demo/src/store/global/theme.store.ts | 19 ++++++++++++-------
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/vue-demo/src/app.ts b/apps/vue-demo/src/app.ts
index 2a7b98d..41df168 100644
--- a/apps/vue-demo/src/app.ts
+++ b/apps/vue-demo/src/app.ts
@@ -2,10 +2,11 @@ import './style/global.less';
 import RootView from './component/RootView.vue';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
+import { globalPinia } from './store/global/theme.store';
 
 export function createVueApp(container: HTMLElement, node?: HTMLElement) {
     const app = createApp(RootView);
-    app.use(createPinia()).mount(container);
+    app.use(globalPinia).use(createPinia()).mount(container);
 
     return () => app.unmount();
 }
diff --git a/apps/vue-demo/src/component/pinia/PiniaThemeSwitch.vue b/apps/vue-demo/src/component/pinia/PiniaThemeSwitch.vue
index 71d7f8f..e4b394a 100644
--- a/apps/vue-demo/src/component/pinia/PiniaThemeSwitch.vue
+++ b/apps/vue-demo/src/component/pinia/PiniaThemeSwitch.vue
@@ -1,12 +1,12 @@
 <template>
-    <button @click="toggleTheme">Switch Theme</button>
+    <button @click="themeStore.toggle()">Switch Theme</button>
 </template>
 
 <script setup lang="ts">
-import { themeStore } from '../../store/global/theme.store';
+import { useThemeStore } from '../../store/global/theme.store';
 import { watch } from 'vue';
 
-const toggleTheme = () => themeStore.toggle();
+const themeStore = useThemeStore();
 
 watch(
     () => themeStore.theme,
diff --git a/apps/vue-demo/src/store/global/theme.store.ts b/apps/vue-demo/src/store/global/theme.store.ts
index 97aa301..f8171f2 100644
--- a/apps/vue-demo/src/store/global/theme.store.ts
+++ b/apps/vue-demo/src/store/global/theme.store.ts
@@ -1,8 +1,13 @@
-import { reactive } from 'vue';
+import { createPinia, defineStore } from 'pinia';
 
-export const themeStore = reactive({
-    theme: 'light',
-    toggle() {
-        this.theme = this.theme === 'light' ? 'dark' : 'light';
-    },
-});
+export const globalPinia = createPinia();
+
+export const useThemeStore = () =>
+    defineStore('theme', {
+        state: () => ({ theme: 'light' }),
+        actions: {
+            toggle() {
+                this.theme = this.theme === 'light' ? 'dark' : 'light';
+            },
+        },
+    })(globalPinia);