chore: using pinia implement global store

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

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