vue3

13.Vue3/my-Pinia/package.json

@@ -11,6 +11,8 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "axios": "^1.8.2",
+    "nanoid": "^5.1.3",
     "pinia": "^3.0.1",
     "vue": "^3.5.13"
   },

13.Vue3/my-Pinia/src/App.vue

@@ -1,11 +1,17 @@
 <template>
   <div>
     <Count/>
+    <hr>
+    <hr>
+    <hr>
+    <hr>
+    <Talk/>
   </div>
 </template>
 
 <script setup>
 import Count from './components/Count.vue'
+import Talk from './components/Talk.vue'
 import { ref, reactive} from 'vue'
 
 </script>

13.Vue3/my-Pinia/src/components/Talk.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <h1>情话</h1>
+    <button @click="getTalkMain">添加情话</button>
+    <ul>
+        <li v-for="(item,index) in list" :key="index">
+            {{ item.content }}
+        </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { useTalkStore } from '@/store/talk';
+import { ref, reactive,} from 'vue'
+import {storeToRefs} from 'pinia'
+const talkList = useTalkStore();
+talkList.$subscribe((mutation,state) => {
+    console.log(mutation,state,'哈哈')
+    localStorage.setItem('newList',JSON.stringify(state.list))
+})
+let {list} = storeToRefs(talkList);
+console.log(list.value)
+function getTalkMain() {
+    talkList.getMain()
+}
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/my-Pinia/src/store/talk.ts

@@ -0,0 +1,36 @@
+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(<string>localStorage.getItem('newList')) || []
+    };
+  },
+  actions:{
+    // [
+    //   "你知道我的缺点是什么吗？是缺点你。",
+    //   "我最近有点忙，忙什么？忙着喜欢你。",
+    //   "你知道我为什么感冒了吗？因为我对你完全没有抵抗力。",
+    //   "你知道我的心在哪边吗？左边啊。不，在你那边。",
+    //   "我想去取一下东西，你等一下，我来娶你了。"
+    // ]
+    getMain() {
+        // axios.get('http://localhost:3000/api/pick-up-line').then(res => {
+        //     console.log(res,'數據')
+        // })
+        // let data = await axios.get("https://api.deepseek.com/tuwei?type=love&count=1");
+        // try {}catch { }
+        let obj = {
+            id:nanoid(),
+            content:"你知道我的缺点是什么吗？是缺点你。"
+        }
+        this.list.push(obj);
+    }
+  }
+});