2024年12月10日09:27:21

vue/vue3/The01/The01/package-lock.json

@@ -8,6 +8,7 @@
       "name": "the01",
       "version": "0.0.0",
       "dependencies": {
+        "pinia": "^2.3.0",
         "vite-plugin-vue-setup-extend": "^0.4.0",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
@@ -2484,6 +2485,28 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.3.0.tgz",
+      "integrity": "sha512-ohZj3jla0LL0OH5PlLTDMzqKiVw2XARmC1XYLdLWIPBMdhDW/123ZWr4zVAhtJm+aoSkFa13pYXskAvAscIkhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.49",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.49.tgz",
@@ -3025,6 +3048,32 @@
         }
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.0.tgz",

vue/vue3/The01/The01/package.json

@@ -11,6 +11,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "pinia": "^2.3.0",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"

vue/vue3/The01/The01/src/main.ts

@@ -2,13 +2,17 @@
 
 import { createApp } from 'vue'
 import App from './App.vue'
-
+//引入pinia
+import { createPinia } from 'pinia'
 // 引入路由器
 import router from './router/index'
-
+//创建一个pinia实例
+const pinia = createPinia()
 // 创建一个应用
 const app = createApp(App)
 //使用路由
 app.use(router)
+//使用pinia
+app.use(pinia)
 // 挂载整个应用到app容器中
 app.mount('#app')

vue/vue3/The01/The01/src/store/count.ts

@@ -0,0 +1,32 @@
+import { defineStore } from "pinia";
+
+export const useCountStore = defineStore('count',{
+    actions:{
+        // 函数名，参数
+        add(){
+        }
+    },  
+
+    //真正求和的地方
+    state(){
+        return{
+            sum:6
+        }
+    }
+})
+
+// 别处引入方法，现在组件内ts引入
+// import { useCountStore } from "@/stores/count";
+// const countStore = useCountStore();
+// countStore.sum;
+// countStore.$state.sum;
+// 
+// 三种修改方式
+// 1.直接引用修改
+// 2.批量修改,可以多元素修改
+// countStore.$patch({sum:8})
+// 一个是一个一个修改，一个是一次性修改发生变化，
+// 3.函数修改,需要在此定义动作函数
+// countStore.定义的函数名(传参)
+// actions中调用state中的属性需要加上 this.  例如 this.sum
+//