vue3

20.vue3/project3/src/main.ts

@@ -1,6 +1,6 @@
 import './assets/main.css'
 import { createApp } from 'vue'
-import App from './App.vue'
+import App from './shallowReadonly.vue'
 import router from './router'
 const app = createApp(App)
 

20.vue3/project3/src/shallowReadonly.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">ShallowReadonly</h1>
+    <!-- <h1 class="h-26 text-6xl">数值为:{{ sum.a }}--{{ sum.b.c }}</h1> -->
+    <h1 class="h-26 text-6xl">数值1为:{{ sum1.a }}--{{ sum1.b.c }}</h1>
+    <button
+      class="w-30 h-10 text-center leading-[40px] border-2 border-grey-900 bg-grey-300"
+      @click="changeSumA"
+    >
+      修改
+    </button>
+    <button
+      class="w-30 h-10 text-center leading-[40px] border-2 border-grey-900 bg-grey-300"
+      @click="changeSumC"
+    >
+      修改1
+    </button>
+    <button
+      class="w-30 h-10 text-center leading-[40px] border-2 border-grey-900 bg-grey-300"
+      @click="changeSum"
+    >
+      修改2
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, readonly, shallowReadonly } from "vue";
+let sum = reactive({
+  a: 20,
+  b: {
+    c: 40,
+  },
+});
+let sum1 = shallowReadonly(sum);
+function changeSumA() {
+  //   sum.value.a = 50;
+  //   sum1.value.a = 1;
+  sum1.a = 12;
+}
+function changeSumC() {
+  //   sum1.value.b.c = 2;
+  //   sum.value.b.c = 100;
+
+  sum1.b.c = 12;
+}
+function changeSum() {
+  let x1 = {
+    a: 0,
+    b: {
+      c: 1,
+    },
+  };
+  Object.assign(sum1, x1);
+}
+// function changeSum1() {
+//   sum1.value = 60;
+// }
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project3/src/shallowRef.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <h1 class="h-26 text-6xl">ShallowRef&shallowReactive</h1>
+    <h3 class="h-16 text-4xl">我叫{{ obj.name }},住在{{ obj.address.city }}</h3>
+    <button
+      class="w-30 h-10 text-center leading-[40px] border-2 border-grey-900 bg-grey-300"
+      @click="changeName"
+    >
+      修改
+    </button>
+    <button
+      class="w-30 h-10 text-center leading-[40px] border-2 border-grey-900 bg-grey-300"
+      @click="changeAddress"
+    >
+      修改地址
+    </button>
+    <button
+      class="w-30 h-10 text-center leading-[40px] border-2 border-grey-900 bg-grey-300"
+      @click="changeMain"
+    >
+      修改整体
+    </button>
+    <h3 class="h-16 text-4xl"></h3>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, shallowRef, shallowReactive } from "vue";
+let obj = shallowReactive({
+  name: "图图",
+  address: {
+    city: "上海",
+  },
+});
+function changeName() {
+  obj.name = "牛爷爷";
+}
+function changeAddress() {
+  obj.address.city = "翻斗花园";
+}
+function changeMain() {
+  let obj1 = {
+    name: "孙悟空",
+    address: {
+      city: "花果山",
+    },
+  };
+  Object.assign(obj, obj1);
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

20.vue3/project5/src/App.vue

@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
   <div>
     <h1>Pinia</h1>
     <h2>当前值是:{{ num }}--双倍:{{ doubleNum }}</h2>
@@ -79,4 +79,117 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-</style>
+</style> -->
+
+<template>
+  <div class="weather-box">
+    <h1>🌡️ 趣味天气温度模拟器</h1>
+
+    <div class="show-card">
+      <div class="icon">{{ weatherIcon }}</div>
+      <p>
+        当前实际温度：<span class="temp">{{ num }} ℃</span>
+      </p>
+      <p>
+        体感温度：<span class="feel">{{ doubleNum }} ℃</span>
+      </p>
+      <p>文字天气：{{ weather }}</p>
+    </div>
+
+    <div class="btn-group">
+      <button @click="handeleAdd(5)">升温 +5℃</button>
+      <button @click="reduceTemp(5)">降温 -5℃</button>
+      <button
+        @click="
+          num = 38;
+          weather = '极端高温';
+        "
+      >
+        直接设38℃
+      </button>
+      <button @click="batchUpdate(0, '大雪纷飞')">$patch 一键入冬</button>
+      <button @click="resetAll">重置到初始26℃</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCountStore } from "./store/count";
+import { storeToRefs } from "pinia";
+import { onUnmounted, onMounted } from "vue";
+
+const countStore = useCountStore();
+
+// 解构响应式数据与方法
+const { num, weather, doubleNum, weatherIcon } = storeToRefs(countStore);
+const { handeleAdd, reduceTemp, batchUpdate, resetAll, autoChangeWeather } =
+  countStore;
+
+// 页面挂载时：读取本地存储恢复温度
+onMounted(() => {
+  const saveTemp = localStorage.getItem("temp");
+  if (saveTemp) {
+    countStore.num = Number(saveTemp);
+    autoChangeWeather();
+  }
+});
+
+// 全局监听写在App.vue，App是根组件，页面全程不销毁
+const unWatch = countStore.$subscribe((mutation, state) => {
+  // 持久化保存
+  localStorage.setItem("temp", state.num.toString());
+  console.log("【App根组件监听】变更类型：", mutation.type);
+  console.log("最新温度：", state.num, "天气：", state.weather);
+});
+
+// 根组件理论不会卸载，加上兜底销毁逻辑
+onUnmounted(() => {
+  unWatch();
+});
+</script>
+
+<style scoped>
+.weather-box {
+  width: 600px;
+  margin: 60px auto;
+  text-align: center;
+  font-family: "Microsoft Yahei";
+}
+.show-card {
+  padding: 30px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, #e0f7ff, #fef9e7);
+  margin-bottom: 30px;
+}
+.icon {
+  font-size: 60px;
+  margin-bottom: 16px;
+}
+.temp {
+  font-size: 28px;
+  color: #e74c3c;
+  font-weight: bold;
+}
+.feel {
+  font-size: 24px;
+  color: #3498db;
+}
+.btn-group {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+button {
+  padding: 10px 16px;
+  border: none;
+  border-radius: 8px;
+  background: #4299e1;
+  color: white;
+  font-size: 15px;
+  cursor: pointer;
+}
+button:hover {
+  background: #3182ce;
+}
+</style>

20.vue3/project5/src/store/count.ts

@@ -1,26 +1,83 @@
-// 1.创建store
-import { defineStore } from 'pinia';
+// // 1.创建store
+// import { defineStore } from 'pinia';
+
+// // 定义一个抛出的Store
+// export const useCountStore = defineStore('count1', {
+//     // data
+//     state() {
+//         return {
+//             num: 666,
+//             weather: "晴天"
+//         }
+//     },
+//     // computed:() => {}
+//     getters: {
+//         doubleNum: (state: any) => {
+//             return state.num * 2
+//         }
+//     },
+//     // methods
+//     actions: {
+//         handeleAdd(val: number) {
+//             this.num += val;
+//         }
+//     }
+// })
+
+import { defineStore } from 'pinia'
 
-// 定义一个抛出的Store
 export const useCountStore = defineStore('count1', {
-    // data
     state() {
         return {
-            num: 666,
+            // 温度
+            num: 26,
+            // 天气
             weather: "晴天"
         }
     },
-    // computed:() => {}
     getters: {
-        doubleNum: (state: any) => {
-            return state.num * 2
+        // 体感温度 = 当前温度 × 1.2
+        doubleNum: (state) => Math.round(state.num * 1.2),
+        // 根据温度返回天气图标
+        weatherIcon(state) {
+            const temp = state.num
+            if (temp >= 35) return '☀️ 高温暴晒'
+            if (temp >= 28) return '⛅ 多云'
+            if (temp >= 18) return '🌤️ 晴天'
+            if (temp >= 5) return '🌧️ 小雨'
+            return '❄️ 暴雪降温'
         }
     },
-    // methods
     actions: {
+        // 升温
         handeleAdd(val: number) {
-            this.num += val;
+            this.num += val
+            this.autoChangeWeather()
+        },
+        // 降温
+        reduceTemp(val: number) {
+            this.num -= val
+            this.autoChangeWeather()
+        },
+        // 批量修改温度+天气
+        batchUpdate(temp: number, weatherText: string) {
+            this.$patch({
+                num: temp,
+                weather: weatherText
+            })
+        },
+        // 一键重置
+        resetAll() {
+            this.$reset()
+        },
+        // 内部自动根据温度切换文字天气
+        autoChangeWeather() {
+            const temp = this.num
+            if (temp >= 35) this.weather = "高温暴晒"
+            else if (temp >= 28) this.weather = "多云"
+            else if (temp >= 18) this.weather = "晴天"
+            else if (temp >= 5) this.weather = "小雨"
+            else this.weather = "暴雪降温"
         }
     }
-})
-
+})