pinia

vue3/my_Pinia/src/components/Count.vue

@@ -2,7 +2,8 @@
   <div class="count">
     <h1>计数</h1>
 
-    <h3>求和为：{{countStore.sum}}</h3>
+    <h3>求和为：{{sum}},变大{{ bigSum }}</h3>
+    <h3>我在：{{address}},转大写{{ upCaseAddress }}</h3>
     <select v-model.number="num">
         <option value="1">1</option>
         <option value="2">2</option>
@@ -20,19 +21,30 @@
 import {ref,reactive} from 'vue';
 // 1.引用
 import {useCountStore} from '@/store/count.ts';
+import {storeToRefs} from 'pinia';
+
+// 2.声明
+const countStore = useCountStore();
+let {sum,address,upCaseAddress,bigSum} = storeToRefs(countStore)
+console.log(sum,'成功');
 
 
 
 
-// 2.声明
-const countStore = useCountStore();
 // console.log(countStore)
 // console.log(countStore.$state.sum)
 
 
 let num = ref(1);
 function addNum() {
-    countStore.sum += num.value;
+    // 1.修改方法
+    // countStore.sum += num.value;
+    // 2.修改方法
+    // countStore.$patch({
+    //     sum:countStore.sum + num.value,
+    // })
+    // 3.修改方式
+    countStore.changeNum(num.value);
 }
 function reduceNum() {
     countStore.sum -= num.value;

vue3/my_Pinia/src/components/Talk.vue

@@ -3,28 +3,22 @@
     <h1>情话</h1>
     <button @click="addMain">添加情话</button>
     <ul>
-        <li v-for="(item,index) in TalkStore.list" :key="index">
+        <li v-for="(item,index) in list" :key="index">
             {{ item.title }}
         </li>
     </ul>
   </div>
 </template>
 <script setup lang="ts" name="Talk">
-import axios from "axios";
-import {nanoid} from 'nanoid';
 import { reactive } from "vue";
 import {useTalkStore} from '@/store/talk.ts';
+import {storeToRefs} from 'pinia';
 
 const TalkStore = useTalkStore();
-async function addMain() {
-    let {data:{content:title}} = await axios.get("https://api.uomg.com/api/rand.qinghua?format=json");
-    console.log(title);
-    let obj = {
-        id:nanoid(),
-        title
-    }
-    TalkStore.list.push(obj);
-
+let {list} = TalkStore;
+console.log(list,'列表')
+function addMain() {
+    TalkStore.getMain();
 }
 </script>
 

vue3/my_Pinia/src/store/count.ts

@@ -4,7 +4,24 @@ export const useCountStore = defineStore('count1',{
     // 1.数据存储
     state() {
         return {
-            sum: 6
+            sum: 6,
+            address: 'haerbin'
+        }
+    },
+    // 2.方法
+    actions:{
+        changeNum(value:number) {
+            console.log(value,'接受的')
+            // console.log(sum)
+            console.log(this);
+            this.sum += value;
+        }
+    },
+    // 3.计算属性
+    getters:{
+        bigSum:state => state.sum * 10,
+        upCaseAddress():string {
+            return this.address.toUpperCase();
         }
     }
 });

vue3/my_Pinia/src/store/talk.ts

@@ -1,4 +1,6 @@
 import {defineStore} from 'pinia';
+import axios from "axios";
+import {nanoid} from 'nanoid';
 export const useTalkStore = defineStore('talk1',{
     state(){
         return {
@@ -8,5 +10,18 @@ export const useTalkStore = defineStore('talk1',{
                 { id: "03", title: "心里给你留了一块地，我的死心塌地" },
               ]
         }
+    },
+    actions:{
+        async getMain() {
+            let {data:{content:title}} = await axios.get("https://api.uomg.com/api/rand.qinghua?format=json");
+            console.log(title);
+            let obj = {
+                id:nanoid(),
+                title
+            }
+            this.list.push(obj);
+            // TalkStore.list.push(obj);
+        
+        }
     }
 })