047~051:尚硅谷路由相关,学习示例

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "axios": "^1.12.2",
         "pinia": "^3.0.3",
+        "ulid": "^3.0.1",
         "uuid": "^13.0.0",
         "vue": "^3.5.22",
         "vue-router": "^4.5.1"
@@ -3135,6 +3136,15 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/ulid": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ulid/-/ulid-3.0.1.tgz",
+      "integrity": "sha512-dPJyqPzx8preQhqq24bBG1YNkvigm87K8kVEHCD+ruZg24t6IFEFv00xMWfxcC4djmFtiTLdFuADn4+DOz6R7Q==",
+      "license": "MIT",
+      "bin": {
+        "ulid": "dist/cli.js"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "axios": "^1.12.2",
     "pinia": "^3.0.3",
+    "ulid": "^3.0.1",
     "uuid": "^13.0.0",
     "vue": "^3.5.22",
     "vue-router": "^4.5.1"

src/components/Count.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="count">
-    <h2>当前求和为Count: {{ countStore.sun }}</h2>
+    <h2>当前求和为Count: {{ sun }}</h2>
+    <h2>欢迎来到{{ school }},坐落于{{ address }}</h2>
     <select v-model.number="n">
       <option value="1">1</option>
       <option value="2">2</option>
@@ -15,19 +16,30 @@
 
 import { ref } from 'vue' // 导入ref函数，用于创建响应式变量
 
+import {storeToRefs} from 'pinia'
+
 import {useCountStore} from '@/store/count'
 const countStore = useCountStore()
 console.log(countStore.sun)
+const {sun,address,school} = storeToRefs(countStore)
 
 
 let n = ref(1) // 创建一个响应式变量count，初始值为10
 
 function increment() { // 定义加数值的函数
-
+  // countStore.sun = 500
+  // countStore.address = '东北'
+  // countStore.school = '齐齐哈尔大学'
+  // countStore.$patch({
+  //   address:'东北',
+  //   school:'齐齐哈尔大学',
+  //   sun:666 // 直接修改sun的值
+  // })
+  countStore.increment(n.value);
 }
 
 function decrement() { // 定义减数值的函数
-
+  countStore.sun -= n.value
 }
 </script>
 

src/components/LoveTalk.vue

@@ -2,7 +2,7 @@
   <div class="talk">
     <button @click="getLoveTaik">获取一句土味情话!</button>
     <ul>
-        <li v-for="talk in talkStore.talkList" :key="talk.id">{{ talk.title }}</li>
+        <li v-for="talk in talkList" :key="talk.id">{{ talk.title }}</li>
     </ul>
   </div>
 </template>
@@ -13,12 +13,21 @@ import { reactive } from 'vue' // 导入ref函数，用于创建响应式数据
 
 import axios from 'axios'
 
-import { v4 as uuidv4 } from 'uuid';
+import {storeToRefs} from 'pinia'
+
+import { ulid } from 'ulid';
 
 import {useLoveTalkStore} from '@/store/lovetalk'
 
 const talkStore = useLoveTalkStore()
 
+let {talkList} = storeToRefs(talkStore)
+
+talkStore.$subscribe((mutate,state)=>{ // 订阅数据变化
+  console.log('数据变化了',mutate,state);
+  localStorage.setItem('talkList',JSON.stringify(state.talkList))
+})  
+
 // let talkList = reactive([{id:'hasdhashdh01',title:'你今天有点怪,哪里怪?怪好看的!'},
 // {id:'hasdhashdh02',title:'你今天有点怪,哪里怪?怪好看的!'},
 // {id:'hasdhashdh03',title:'你今天有点怪,哪里怪?怪好看的!'},
@@ -28,7 +37,7 @@ async function getLoveTaik() {
 
     const {data} = await axios.get('https://api.oddfar.com/yl/q.php?c=2004&encode=text')
     //console.log(result.data);
-    let obj = {id:uuidv4(),title:data}
+    let obj = {id:ulid(),title:data}
     // talkList.unshift(obj)
     talkStore.talkList.unshift(obj)
     console.log(obj);

src/store/count.ts

@@ -1,11 +1,29 @@
 import { defineStore } from "pinia";
+import { shallowRef } from "vue";
 
 export const useCountStore = defineStore('count',{
+    actions:{
+        increment(value:number){
+            if(this.sun >= 200){
+                console.log('sun的值已经大于200了');
+                return;
+            }
+            this.sun += value;
+            console.log('sun的值被更改了',this.sun);
+        }
+    },
     // 状态
     state:()=>{
         return {
-            sun:100
+            sun:100,
+            school:'北京大学',
+            address:'北京'
         }
     
+    },
+    getters:{
+        bigSun(state):number{
+            return state.sun * 10;
+        }
     }
 })

src/store/lovetalk.ts

@@ -1,13 +1,20 @@
 import { defineStore } from "pinia";
 
-export const useLoveTalkStore = defineStore('talk',{
+import { reactive } from "vue";
-    // 状态
-    state:()=>{
-        return {
-            talkList:[{id:'hasdhashdh01',title:'你今天有点怪,哪里怪?怪好看的!'},
-{id:'hasdhashdh02',title:'你今天有点怪,哪里怪?怪好看的!'},
-{id:'hasdhashdh03',title:'你今天有点怪,哪里怪?怪好看的!'},]
-        }
 
+// export const useLoveTalkStore = defineStore('talk',{
+//     // 状态
+//     state:()=>{
+//         return {
+//             talkList:JSON.parse(localStorage.getItem('talkList') as string) || []
+//         }
+    
+//     }
+// })
+
+export const useLoveTalkStore = defineStore('talk',()=>{
+    const talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string) || [])
+    return {
+        talkList
     }
 })