vue学习

学习VUE/hello_vue3/src/components/Count.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="count">
-    <h2>当前求和:{{ sum }}</h2>
+    <h2>当前求和:{{ sum }} 放大10倍 {{ bigSum }}</h2>
     <select v-model.number="n">
       <option value="1">1</option>
       <option value="2">2</option>
@@ -13,15 +13,24 @@
 
 <script setup lang="ts">
 import {ref} from 'vue'
+import {useCountStore} from '@/store/count'
+import {storeToRefs} from "pinia"
+
+const countStore = useCountStore()
+
+// 只负责转换 pinia 数据，变成响应式
+const {sum, bigSum} = storeToRefs(countStore)
+
+console.log(bigSum)
 
-let sum = ref(1)
 let n = ref(1)
 
-function add(){
+function add() {
-  sum.value += n.value
+  countStore.increment(n.value)
 }
-function minus(){
+
-  sum.value -= n.value
+function minus() {
+  countStore.reduce(n.value)
 }
 </script>
 

学习VUE/hello_vue3/src/components/LoveTalk.vue

@@ -12,12 +12,17 @@ import {reactive, ref} from 'vue'
 import axios from "axios";
 import { v4 as uuidv4 } from 'uuid'
 
-let talkList = reactive([
+import { useTalkStore } from "@/store/lovetalk"
-  {id: 'dasfada001', title: '111ue3入门到实战，最新版vue3+TypeScript前端开发教程'},
-  {id: 'dasfada002', title: '333ue3入门到实战，最新版vue3+TypeScript前端开发教程'},
-  {id: 'dasfada003', title: '222ue3入门到实战，最新版vue3+TypeScript前端开发教程'}
-])
 
+const talkStore = useTalkStore()
+let talkList = reactive(talkStore.talkList)
+
+// 记录改变的数据，实现刷新不丢失数据,草稿,购物车,暂时不着急入库的数据
+talkStore.$subscribe((mutate, state) => {
+  console.log(mutate)
+  console.log(state)
+  localStorage.setItem('talkList', JSON.stringify(state.talkList))
+})
 
 async function getTitle(){
   let res = await axios.get("https://api.uomg.com/api/rand.qinghua?format=json")

学习VUE/hello_vue3/src/store/count.ts

@@ -0,0 +1,28 @@
+import {defineStore} from 'pinia'
+
+export const useCountStore = defineStore('count', {
+        // 动作函数响应动作
+        actions: {
+            increment(val: Number) {
+                if (this.sum < 10) {
+                    this.sum += val
+                }
+            },
+            reduce(val: Number) {
+                if (this.sum > -10) {
+                    this.sum -= val
+                }
+            },
+        },
+        state() {
+            return {sum: 6}
+        },
+
+        // 放大 函数 state的返回值，有点hook的感觉
+        getters : {
+            bigSum(state){
+                return state.sum * 10
+            }
+        }
+    }
+)

学习VUE/hello_vue3/src/store/lovetalk.ts

@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia';
+
+export const useTalkStore = defineStore('talk', {
+    state() {
+        // 获取 localStorage 中的数据，并判断是否存在
+        const storedTalkList = localStorage.getItem('talkList');
+
+        // 如果存储的 talkList 存在，则解析它，否则使用空数组
+        return {
+            talkList: storedTalkList ? JSON.parse(storedTalkList) : []
+        };
+    }
+});