chore(projects): 增加pinia全局状态

package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "axios": "^0.27.2",
+    "pinia": "^2.0.17",
     "vue": "^3.2.37",
     "vue-router": "^4.1.3"
   },

src/main.ts

@@ -2,6 +2,7 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import { setupRouter } from './router';
 import { setupAssets } from './plugins';
+import { setupStore } from './store';
 
 async function setupApp() {
   // 引入静态资源
@@ -10,6 +11,8 @@ async function setupApp() {
   const app = createApp(App);
   // 安装router
   await setupRouter(app);
+  // 安装pinia全局状态库
+  setupStore(app);
   // 挂载
   app.mount('#app');
 }

src/store/index.ts

@@ -0,0 +1,7 @@
+import { createPinia } from 'pinia';
+import type { App } from 'vue';
+
+export function setupStore(app: App) {
+  const store = createPinia();
+  app.use(store);
+}

src/store/modules/index.ts

@@ -0,0 +1 @@
+export * from './user';

src/store/modules/user.ts

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia';
+
+// useStore 可以是 useUser、useCart 之类的任何东西
+// 第一个参数是应用程序中 store 的唯一 id
+export const useStore = defineStore('user-store', {
+  // other options...
+  state: () => {
+    return {
+      name: '张三',
+    };
+  },
+});

src/views/test/test2.vue

@@ -1,9 +1,14 @@
 <template>
   <div text-center c-yellow>I prove that you have made the jump test2.</div>
+  {{ userStore.name }}
 </template>
 
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
+import { useStore } from '@/store/modules';
+
+const userStore = useStore();
+
 const router = useRouter();
 </script>