feat: 添加pinia

package.json

@@ -9,7 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@types/node": "^22.5.4",
     "element-plus": "^2.8.1",
+    "pinia": "^2.2.2",
     "vue": "^3.4.37",
     "vue-i18n": "^9.14.0",
     "vue-router": "^4.4.3"

pnpm-lock.yaml

@@ -8,9 +8,15 @@ importers:
 
   .:
     dependencies:
+      '@types/node':
+        specifier: ^22.5.4
+        version: 22.5.4
       element-plus:
         specifier: ^2.8.1
         version: 2.8.1(vue@3.5.2(typescript@5.5.4))
+      pinia:
+        specifier: ^2.2.2
+        version: 2.2.2(typescript@5.5.4)(vue@3.5.2(typescript@5.5.4))
       vue:
         specifier: ^3.4.37
         version: 3.5.2(typescript@5.5.4)
@@ -23,7 +29,7 @@ importers:
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^5.1.2
-        version: 5.1.3(vite@5.4.3)(vue@3.5.2(typescript@5.5.4))
+        version: 5.1.3(vite@5.4.3(@types/node@22.5.4))(vue@3.5.2(typescript@5.5.4))
       typescript:
         specifier: ^5.5.3
         version: 5.5.4
@@ -35,7 +41,7 @@ importers:
         version: 0.27.4(@babel/parser@7.25.6)(rollup@4.21.2)(vue@3.5.2(typescript@5.5.4))
       vite:
         specifier: ^5.4.1
-        version: 5.4.3
+        version: 5.4.3(@types/node@22.5.4)
       vue-tsc:
         specifier: ^2.0.29
         version: 2.1.6(typescript@5.5.4)
@@ -346,6 +352,9 @@ packages:
   '@types/lodash@4.17.7':
     resolution: {integrity: sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==}
 
+  '@types/node@22.5.4':
+    resolution: {integrity: sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==}
+
   '@types/web-bluetooth@0.0.16':
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
@@ -610,6 +619,18 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
+  pinia@2.2.2:
+    resolution: {integrity: sha512-ja2XqFWZC36mupU4z1ZzxeTApV7DOw44cV4dhQ9sGwun+N89v/XP7+j7q6TanS1u1tdbK4r+1BUx7heMaIdagA==}
+    peerDependencies:
+      '@vue/composition-api': ^1.4.0
+      typescript: '>=4.4.4'
+      vue: ^2.6.14 || ^3.3.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+      typescript:
+        optional: true
+
   pkg-types@1.2.0:
     resolution: {integrity: sha512-+ifYuSSqOQ8CqP4MbZA5hDpb97n3E8SVWdJe+Wms9kj745lmd3b7EZJiqvmLwAlmRfjrI7Hi5z3kdBJ93lFNPA==}
 
@@ -667,6 +688,9 @@ packages:
   ufo@1.5.4:
     resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
+  undici-types@6.19.8:
+    resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
+
   unimport@3.11.1:
     resolution: {integrity: sha512-DuB1Uoq01LrrXTScxnwOoMSlTXxyKcULguFxbLrMDFcE/CO0ZWHpEiyhovN0mycPt7K6luAHe8laqvwvuoeUPg==}
 
@@ -973,11 +997,15 @@ snapshots:
 
   '@types/lodash@4.17.7': {}
 
+  '@types/node@22.5.4':
+    dependencies:
+      undici-types: 6.19.8
+
   '@types/web-bluetooth@0.0.16': {}
 
-  '@vitejs/plugin-vue@5.1.3(vite@5.4.3)(vue@3.5.2(typescript@5.5.4))':
+  '@vitejs/plugin-vue@5.1.3(vite@5.4.3(@types/node@22.5.4))(vue@3.5.2(typescript@5.5.4))':
     dependencies:
-      vite: 5.4.3
+      vite: 5.4.3(@types/node@22.5.4)
       vue: 3.5.2(typescript@5.5.4)
 
   '@volar/language-core@2.4.2':
@@ -1287,6 +1315,14 @@ snapshots:
 
   picomatch@2.3.1: {}
 
+  pinia@2.2.2(typescript@5.5.4)(vue@3.5.2(typescript@5.5.4)):
+    dependencies:
+      '@vue/devtools-api': 6.6.3
+      vue: 3.5.2(typescript@5.5.4)
+      vue-demi: 0.14.10(vue@3.5.2(typescript@5.5.4))
+    optionalDependencies:
+      typescript: 5.5.4
+
   pkg-types@1.2.0:
     dependencies:
       confbox: 0.1.7
@@ -1353,6 +1389,8 @@ snapshots:
 
   ufo@1.5.4: {}
 
+  undici-types@6.19.8: {}
+
   unimport@3.11.1(rollup@4.21.2):
     dependencies:
       '@rollup/pluginutils': 5.1.0(rollup@4.21.2)
@@ -1413,12 +1451,13 @@ snapshots:
       acorn: 8.12.1
       webpack-virtual-modules: 0.6.2
 
-  vite@5.4.3:
+  vite@5.4.3(@types/node@22.5.4):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.45
       rollup: 4.21.2
     optionalDependencies:
+      '@types/node': 22.5.4
       fsevents: 2.3.3
 
   vscode-uri@3.0.8: {}

src/App.vue

@@ -12,6 +12,7 @@
   <RouterLink to="/">Go to Home</RouterLink>
 
   <RouterLink to="/about">Go to About</RouterLink>
+  <RouterLink to="/demo">demo</RouterLink>
   <RouterView />
 </template>
 

src/components/Demo.vue

@@ -1,7 +1,12 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useCounterStore } from '@/stores/counter';
+
+const store = useCounterStore();
+</script>
 
 <template>
-  <el-button>我是 ElButton</el-button>
+  <el-button>我是 ElButton {{ store.count }}</el-button>
+  <el-button @click="store.increment()">我是 ElButton </el-button>
   <RouterLink to="/">Go to Home</RouterLink>
 
   <RouterLink to="/about">Go to About</RouterLink>

src/main.ts

@@ -1,8 +1,11 @@
+import { createPinia } from 'pinia';
 import { createApp } from 'vue';
 import { createI18n } from 'vue-i18n';
 import { createMemoryHistory, createRouter } from 'vue-router';
 import App from './App.vue';
 import HelloWorld from './components/HelloWorld.vue';
+
+import Demo from './components/Demo.vue';
 import './style.css';
 const i18n = createI18n({
   locale: 'zh',
@@ -24,8 +27,11 @@ const i18n = createI18n({
 const routes = [
   { path: '/', component: App },
   { path: '/about', component: HelloWorld },
+  { path: '/demo', component: Demo },
 ];
 
+const pinia = createPinia();
+
 const router = createRouter({
   history: createMemoryHistory(),
   routes,
@@ -35,5 +41,6 @@ const app = createApp(App);
 app.use(i18n);
 
 app.use(router);
+app.use(pinia);
 
 app.mount('#app');

src/stores/counter.ts

@@ -0,0 +1,11 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0);
+  const doubleCount = computed(() => count.value * 2);
+  function increment() {
+    count.value++;
+  }
+
+  return { count, doubleCount, increment };
+});

src/types/auto-import-components.d.ts

@@ -11,6 +11,8 @@ declare module 'vue' {
     Demo: typeof import('./../components/Demo.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     HelloWorld: typeof import('./../components/HelloWorld.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
     SelectLanguage: typeof import('./../components/SelectLanguage.vue')['default']
   }
 }

tsconfig.app.json

@@ -1,5 +1,11 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
     "types": [
       "element-plus/global"
     ],

vite.config.ts

@@ -1,4 +1,5 @@
 import vue from '@vitejs/plugin-vue';
+import { fileURLToPath, URL } from 'node:url';
 import AutoImport from 'unplugin-auto-import/vite';
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 import Components from 'unplugin-vue-components/vite';
@@ -20,4 +21,9 @@ export default defineConfig({
       dts: 'src/types/auto-import-components.d.ts',
     }),
   ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
 });