From 637bf30aab84f0ccf69e86762908b735442db083 Mon Sep 17 00:00:00 2001
From: L&H <abc@hub.moe>
Date: Tue, 19 Dec 2023 11:04:41 +0800
Subject: [PATCH] chore: using pinia implement global store

---
 .../src/component/pinia/PiniaThemeSwitch.vue  |  6 +++---
 apps/vue-demo/src/store/global/theme.store.ts | 20 ++++++++++++-------
 2 files changed, 16 insertions(+), 10 deletions(-)

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..3670f01 100644
--- a/apps/vue-demo/src/store/global/theme.store.ts
+++ b/apps/vue-demo/src/store/global/theme.store.ts
@@ -1,8 +1,14 @@
-import { reactive } from 'vue';
+import { createPinia, defineStore } from 'pinia';
 
-export const themeStore = reactive({
-    theme: 'light',
-    toggle() {
-        this.theme = this.theme === 'light' ? 'dark' : 'light';
-    },
-});
+/** 这是全局实例，不需要使用 App.use() 注入 */
+const GLOBAL_REF = createPinia();
+
+export const useThemeStore = () =>
+    defineStore('theme', {
+        state: () => ({ theme: 'light' }),
+        actions: {
+            toggle() {
+                this.theme = this.theme === 'light' ? 'dark' : 'light';
+            },
+        },
+    })(GLOBAL_REF);