pinia实现

2025-04-24 23:02:37 +08:00 · 2025-04-24 23:02:37 +08:00 · 5f03400844
parent b7f8b9f5fa
commit 5f03400844
7 changed files with 140 additions and 44 deletions
--- a/package.json
+++ b/package.json
@ -11,6 +11,7 @@
  "dependencies": {
    "axios": "^1.8.4",
    "element-plus": "^2.9.8",
+    "pinia": "^3.0.2",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -14,6 +14,9 @@ importers:
      element-plus:
        specifier: ^2.9.8
        version: 2.9.8(vue@3.5.13)
+      pinia:
+        specifier: ^3.0.2
+        version: 3.0.2(vue@3.5.13)
      vue:
        specifier: ^3.5.13
        version: 3.5.13
@ -369,6 +372,15 @@ packages:
  '@vue/devtools-api@6.6.4':
    resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}

+  '@vue/devtools-api@7.7.5':
+    resolution: {integrity: sha512-HYV3tJGARROq5nlVMJh5KKHk7GU8Au3IrrmNNqr978m0edxgpHgYPDoNUGrvEgIbObz09SQezFR3A1EVmB5WZg==}
+
+  '@vue/devtools-kit@7.7.5':
+    resolution: {integrity: sha512-S9VAVJYVAe4RPx2JZb9ZTEi0lqTySz2CBeF0wHT5D3dkTLnT9yMMGegKNl4b2EIELwLSkcI9bl2qp0/jW+upqA==}
+
+  '@vue/devtools-shared@7.7.5':
+    resolution: {integrity: sha512-QBjG72RfpM0DKtpns2RZOxBltO226kOAls9e4Lri6YxS2gWTgL0H+wj1R2K76lxxIeOrqo4+2Ty6RQnzv+WSTQ==}
+
  '@vue/reactivity@3.5.13':
    resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}

@ -404,6 +416,9 @@ packages:
  axios@1.8.4:
    resolution: {integrity: sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==}

+  birpc@2.3.0:
+    resolution: {integrity: sha512-ijbtkn/F3Pvzb6jHypHRyve2QApOCZDR25D/VnkY2G/lBNcXCTsnsCxgY4k4PkVB7zfwzYbY3O9Lcqe3xufS5g==}
+
  call-bind-apply-helpers@1.0.2:
    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
    engines: {node: '>= 0.4'}
@ -412,6 +427,10 @@ packages:
    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
    engines: {node: '>= 0.8'}

+  copy-anything@3.0.5:
+    resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
+    engines: {node: '>=12.13'}
+
  csstype@3.1.3:
    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}

@ -519,6 +538,13 @@ packages:
    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
    engines: {node: '>= 0.4'}

+  hookable@5.5.3:
+    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
+
+  is-what@4.1.16:
+    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
+    engines: {node: '>=12.13'}
+
  lodash-es@4.17.21:
    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}

@ -550,6 +576,9 @@ packages:
    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
    engines: {node: '>= 0.6'}

+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
  nanoid@3.3.11:
    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@ -558,6 +587,9 @@ packages:
  normalize-wheel-es@1.2.0:
    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}

+  perfect-debounce@1.0.0:
+    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
+
  picocolors@1.1.1:
    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}

@ -565,6 +597,15 @@ packages:
    resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
    engines: {node: '>=12'}

+  pinia@3.0.2:
+    resolution: {integrity: sha512-sH2JK3wNY809JOeiiURUR0wehJ9/gd9qFN2Y828jCbxEzKEmEt0pzCXwqiSTfuRsK9vQsOflSdnbdBOGrhtn+g==}
+    peerDependencies:
+      typescript: '>=4.4.4'
+      vue: ^2.7.0 || ^3.5.11
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
  postcss@8.5.3:
    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
    engines: {node: ^10 || ^12 || >=14}
@ -572,6 +613,9 @@ packages:
  proxy-from-env@1.1.0:
    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}

+  rfdc@1.4.1:
+    resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
+
  rollup@4.40.0:
    resolution: {integrity: sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==}
    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@ -581,6 +625,14 @@ packages:
    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
    engines: {node: '>=0.10.0'}

+  speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+
+  superjson@2.2.2:
+    resolution: {integrity: sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==}
+    engines: {node: '>=16'}
+
  tinyglobby@0.2.13:
    resolution: {integrity: sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==}
    engines: {node: '>=12.0.0'}
@ -867,6 +919,24 @@ snapshots:

  '@vue/devtools-api@6.6.4': {}

+  '@vue/devtools-api@7.7.5':
+    dependencies:
+      '@vue/devtools-kit': 7.7.5
+
+  '@vue/devtools-kit@7.7.5':
+    dependencies:
+      '@vue/devtools-shared': 7.7.5
+      birpc: 2.3.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      superjson: 2.2.2
+
+  '@vue/devtools-shared@7.7.5':
+    dependencies:
+      rfdc: 1.4.1
+
  '@vue/reactivity@3.5.13':
    dependencies:
      '@vue/shared': 3.5.13
@ -922,6 +992,8 @@ snapshots:
    transitivePeerDependencies:
      - debug

+  birpc@2.3.0: {}
+
  call-bind-apply-helpers@1.0.2:
    dependencies:
      es-errors: 1.3.0
@ -931,6 +1003,10 @@ snapshots:
    dependencies:
      delayed-stream: 1.0.0

+  copy-anything@3.0.5:
+    dependencies:
+      is-what: 4.1.16
+
  csstype@3.1.3: {}

  dayjs@1.11.13: {}
@ -1063,6 +1139,10 @@ snapshots:
    dependencies:
      function-bind: 1.1.2

+  hookable@5.5.3: {}
+
+  is-what@4.1.16: {}
+
  lodash-es@4.17.21: {}

  lodash-unified@1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21):
@ -1087,14 +1167,23 @@ snapshots:
    dependencies:
      mime-db: 1.52.0

+  mitt@3.0.1: {}
+
  nanoid@3.3.11: {}

  normalize-wheel-es@1.2.0: {}

+  perfect-debounce@1.0.0: {}
+
  picocolors@1.1.1: {}

  picomatch@4.0.2: {}

+  pinia@3.0.2(vue@3.5.13):
+    dependencies:
+      '@vue/devtools-api': 7.7.5
+      vue: 3.5.13
+
  postcss@8.5.3:
    dependencies:
      nanoid: 3.3.11
@ -1103,6 +1192,8 @@ snapshots:

  proxy-from-env@1.1.0: {}

+  rfdc@1.4.1: {}
+
  rollup@4.40.0:
    dependencies:
      '@types/estree': 1.0.7
@ -1131,6 +1222,12 @@ snapshots:

  source-map-js@1.2.1: {}

+  speakingurl@14.0.1: {}
+
+  superjson@2.2.2:
+    dependencies:
+      copy-anything: 3.0.5
+
  tinyglobby@0.2.13:
    dependencies:
      fdir: 6.4.4(picomatch@4.0.2)
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -1,43 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
--- a/src/main.js
+++ b/src/main.js
@ -4,10 +4,13 @@ import App from './App.vue'
 import axios from 'axios'
 import ElementPlus from 'element-plus'
 import router from './router'
+import { createPinia } from 'pinia'
 import 'element-plus/dist/index.css'

+const pinia=createPinia()
 const app=createApp(App)

+app.use(pinia)
 app.use(router)
 app.use(ElementPlus)
 app.config.globalProperties.$axios=axios
--- a/src/store/token.js
+++ b/src/store/token.js
@ -0,0 +1,21 @@
+import {defineStore} from 'pinia'
+
+
+export const useTokenStore = defineStore('tokens', {
+    state: () => ({
+      count: 0
+    }),
+    actions: {
+      increment() {
+        this.count++
+      },
+      incrementAsync() {
+        setTimeout(() => {
+          this.increment()
+        }, 1000)
+      }
+    },
+    getters: {
+      doubleCount: (state) => state.count * 2
+    }
+  })
--- a/src/views/about.vue
+++ b/src/views/about.vue
@ -1,5 +1,15 @@
 <template>
    <div>
        <p>hello about</p>
+        <p>Count: {{ tokenStore.count }}</p>
    </div>
-</template>
+</template>
+
+<script setup>
+import { useTokenStore } from '../store/token.js';
+
+const tokenStore=useTokenStore();
+</script>
+
+<style scoped>
+</style>
--- a/src/views/home.vue
+++ b/src/views/home.vue
@ -1,6 +1,10 @@
 <template>
    <div>
        <p>hello home</p>
+        <p>Count: {{ tokenStore.count }}</p>
+        <button @click="tokenStore.increment">Increment</button>
+        <button @click="tokenStore.incrementAsync">Increment Async</button>
+        <router-link to="/about">About</router-link>
        <el-alert
        v-if="showAlert"
        :title="alertTitle"
@ -17,6 +21,9 @@
 <script setup>
 import { ref } from 'vue';
 import request from '../api/request.js'
+import { useTokenStore } from '../store/token.js';
+
+const tokenStore=useTokenStore()

 // 定义用于控制 el-alert 显示的变量
 const showAlert = ref(false);