vue3

15.vue3/vue-pinia/package.json

@@ -11,6 +11,8 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "axios": "^1.7.9",
+    "nanoid": "^5.0.9",
     "pinia": "^2.3.0",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue": "^3.5.13"

15.vue3/vue-pinia/src/App.vue

@@ -1,12 +1,17 @@
 <template>
   <div>
     <Count/>
+    <br>
+    <br>
+    <br>
+    <Talk/>
   </div>
 </template>
 
 <script setup lang="ts" name="app">
 import { ref, reactive} from 'vue'
 import Count from '@/components/Count.vue'
+import Talk from '@/components/Talk.vue'
 
 </script>
 <style lang='scss' scoped>

15.vue3/vue-pinia/src/components/Talk.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h2>土味情话</h2>
+    <button @click="addTalk">添加</button>
+    <ul>
+        <li v-for="(item,index) in  list" :key='index'>
+            {{item.content}}
+        </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts" name="Talk">
+import { ref, reactive} from 'vue'
+import {useTalkStore} from '@/store/talk.ts';
+import {storeToRefs} from 'pinia';
+// let a = ref(1);
+// localStorage.setItem('haha',JSON.stringify(a))
+let talkStore = useTalkStore()
+console.log(talkStore.list,'talkStore')
+let list = talkStore.list;
+talkStore.$subscribe((mutation,state) => {
+    console.log(mutation,'1')
+    console.log(state,'2')
+    localStorage.setItem("talkMain",JSON.stringify(state.list));
+})
+// let {list} = storeToRefs(talkStore)
+function addTalk() {
+    talkStore.getList()
+}
+</script>
+<style lang='scss' scoped>
+
+</style>

15.vue3/vue-pinia/src/store/talk.ts

@@ -0,0 +1,75 @@
+import { defineStore } from "pinia";
+import axios from 'axios';
+import { nanoid } from "nanoid";
+// export const useTalkStore = defineStore("talk1", {
+//   state() {
+//     return {
+//     //   list: [
+//     //     {
+//     //       id: "01",
+//     //       content:
+//     //         "我发现昨天很喜欢你，今天也很喜欢你，而且有预感明天也会喜欢你",
+//     //     },
+//     //     {
+//     //       id: "02",
+//     //       content: "你知道你和星星有什么区别吗?星星在天上，你在我心里",
+//     //     },
+//     //     {
+//     //       id: "03",
+//     //       content: "我想买一块地。” “什么地?” “你的死心塌地。",
+//     //     },
+//     //   ],
+//         list:JSON.parse(localStorage.getItem("talkMain") as string) || []
+//     };
+//   },
+//   actions:{
+//     async getList() {
+//         let {data:{content}} = await axios.get("https://api.uomg.com/api/rand.qinghua?format=json");
+
+//         let obj = {
+//             id:nanoid(),
+//             content
+//         }
+//         console.log(this.list)
+//         console.log(obj,'obj')
+//         this.list.push(obj);
+//     }    
+//   }
+// });
+
+// {
+//     state() {
+//       return {
+//           list:JSON.parse(localStorage.getItem("talkMain") as string) || []
+//       };
+//     },
+//     actions:{
+//       async getList() {
+//           let {data:{content}} = await axios.get("https://api.uomg.com/api/rand.qinghua?format=json");
+  
+//           let obj = {
+//               id:nanoid(),
+//               content
+//           }
+//           console.log(this.list)
+//           console.log(obj,'obj')
+//           this.list.push(obj);
+//       }    
+//     }
+//   }
+
+export const useTalkStore = defineStore("talk1", ()=>{
+    let list = JSON.parse(localStorage.getItem("talkMain") as string) || [];
+    async function getList() {
+        let {data:{content}} = await axios.get("https://api.uomg.com/api/rand.qinghua?format=json");
+        let obj = {
+            id:nanoid(),
+            content
+        }
+        list.push(obj);
+        // localStorage.setItem("talkMain",JSON.stringify(list));
+    }
+    return {
+        list,getList
+    }
+});

15.vue3/vue-pinia/yarn.lock

@@ -766,6 +766,20 @@ ansi-styles@^6.2.1:
   resolved "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
 
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+axios@^1.7.9:
+  version "1.7.9"
+  resolved "https://registry.npmmirror.com/axios/-/axios-1.7.9.tgz#d7d071380c132a24accda1b2cfc1535b79ec650a"
+  integrity sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -805,6 +819,13 @@ caniuse-lite@^1.0.30001688:
   resolved "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001692.tgz#4585729d95e6b95be5b439da6ab55250cd125bf9"
   integrity sha512-A95VKan0kdtrsnMubMKxEKUKImOPSuCpYgxSQBo036P5YYgVIcOYJEgt/txJWqObiRQeISNCfef9nvlQ0vbV7A==
 
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
 convert-source-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
@@ -861,6 +882,11 @@ define-lazy-prop@^3.0.0:
   resolved "https://registry.npmmirror.com/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz#dbb19adfb746d7fc6d734a06b72f4a00d021255f"
   integrity sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==
 
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
 electron-to-chromium@^1.5.73:
   version "1.5.83"
   resolved "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.83.tgz#3f74078f0c83e24bf7e692eaa855a998d1bec34f"
@@ -942,6 +968,20 @@ figures@^6.1.0:
   dependencies:
     is-unicode-supported "^2.0.0"
 
+follow-redirects@^1.15.6:
+  version "1.15.9"
+  resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
+
+form-data@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.npmmirror.com/form-data/-/form-data-4.0.1.tgz#ba1076daaaa5bfd7e99c1a6cb02aa0a5cff90d48"
+  integrity sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 fs-extra@^11.2.0:
   version "11.3.0"
   resolved "https://registry.npmmirror.com/fs-extra/-/fs-extra-11.3.0.tgz#0daced136bbaf65a555a326719af931adc7a314d"
@@ -1108,6 +1148,18 @@ memorystream@^0.3.1:
   resolved "https://registry.npmmirror.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
   integrity sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==
 
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 minimatch@^9.0.0, minimatch@^9.0.3:
   version "9.0.5"
   resolved "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
@@ -1256,6 +1308,11 @@ pretty-ms@^9.0.0:
   dependencies:
     parse-ms "^4.0.0"
 
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
 read-package-json-fast@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmmirror.com/read-package-json-fast/-/read-package-json-fast-4.0.0.tgz#8ccbc05740bb9f58264f400acc0b4b4eee8d1b39"