chore: using pinia implement global store

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,

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);