pinia

12.vue3/project3/src/main.ts

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

12.vue3/project3/src/views/Demo1.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <h1>shallowRef-shallowReactive</h1>
+    <h2>{{ num }}</h2>
+    <!-- <button @click="changeNum">修改num</button> -->
+    <h2>我叫{{ list.name }},今年{{ list.age }}岁,我有一个{{ list.desc.a }}</h2>
+    <button @click="changeName">修改名字</button>
+    <button @click="changePerson">修改整体</button>
+    <button @click="changePerson1">修改属性</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive,shallowRef, shallowReactive} from "vue" 
+let num = shallowRef(10);
+// let list = shallowRef({
+//     name:"图图",
+//     age:3
+// })
+// function changeNum() {
+//     num.value = 20;
+// }
+// function changeName() {
+//     list.value.name = '懒羊羊';
+// }
+// function changePerson() {
+//     // Object.assign(list.value,{
+//     //     name:"孙悟空",
+//     //     age:20
+//     // })
+//     list.value = {
+//         name:'孙悟空',
+//         age:20
+//     }
+// }
+let list = shallowReactive({
+    name:"图图",
+    age:3,
+    desc:{
+        a:"小喵"
+    }
+})
+function changeName() {
+    list.name = '懒羊羊1';
+}
+function changePerson() {
+    Object.assign(list,{
+        name:"孙悟空",
+        age:20
+    })
+    // list.value = {
+    //     name:'孙悟空',
+    //     age:20
+    // }
+}
+function changePerson1() {
+    list.desc.a = '金箍棒'
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

12.vue3/project4/components.d.ts

@@ -15,5 +15,8 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanButton: typeof import('vant/es')['Button']
+    VanGrid: typeof import('vant/es')['Grid']
+    VanGridItem: typeof import('vant/es')['GridItem']
+    VanImage: typeof import('vant/es')['Image']
   }
 }

12.vue3/project4/src/components/Count.vue

@@ -8,12 +8,32 @@
     <van-button type="default">默认按钮</van-button>
     <van-button type="danger">危险按钮</van-button>
     <van-button type="warning">警告按钮</van-button>
-    {{ list }}
+    <!-- {{ list }} -->
+    <!-- 渲染 -->
+    <div class="box">
+      <div class="content" v-for="(item, index) in list" :key="index">
+        <div class="top">
+          <div class="left">{{ item.title }}</div>
+          <div class="right">查看更多</div>
+        </div>
+        <div class="bottom">
+          <van-grid :column-num="3" :border="false">
+            <van-grid-item
+              v-for="(item1, index1) in item.productDtoList"
+              :key="index1"
+            >
+              <van-image :src="item1.pic" />
+              <p>{{ item1.prodName }}</p>
+            </van-grid-item>
+          </van-grid>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import axios from 'axios';
+import axios from "axios";
 import { ref, reactive, onMounted } from "vue";
 import { useCountStore } from "@/store/count";
 import { storeToRefs } from "pinia";
@@ -28,19 +48,35 @@ function changeAdd() {
   });
 }
 let list = ref([]);
-onMounted(()=>{
-    init();
-
-})
+onMounted(() => {
+  init();
+});
 function init() {
-    axios.get("http://shop-api.edu.koobietech.com/prod/tagProdList").then(res => {
-        console.log(res.data.data)
-        list.value = res.data.data;
-    })
+  axios
+    .get("http://shop-api.edu.koobietech.com/prod/tagProdList")
+    .then((res) => {
+      console.log(res.data.data);
+      list.value = res.data.data;
+    });
 }
 // get
 // http://shop-api.edu.koobietech.com/prod/tagProdList
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
+.box {
+  width: 100%;
+}
+.content {
+  border-bottom: 2px solid #ccc;
+  margin-top: 10px;
+  padding: 0 10px;
+}
+.content .top {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 </style>