pinia

20.vue3/project5/src/App.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     <h1>Pinia</h1>
-    <h2>当前值是:{{ countStore.num }}--双倍:{{ countStore.doubleNum }}</h2>
+    <h2>当前值是:{{ num }}--双倍:{{ doubleNum }}</h2>
+    <h2>今天天气是:{{ weather }}</h2>
     <select v-model="sum">
       <option value="1">1</option>
       <option value="2">2</option>
@@ -9,20 +10,58 @@
       <option value="4">4</option>
     </select>
     <button @click="addMain">增加</button>
+    <button @click="changeWeather">修改天气</button>
+    <button @click="changeMain">修改数据</button>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from "vue";
+import { ref, onUnmounted } from "vue";
 import { useCountStore } from "./store/count";
+import { storeToRefs } from "pinia";
 const countStore = useCountStore();
+// countStore.handeleAdd(Number(sum.value));
+let { num, doubleNum, weather } = storeToRefs(countStore);
 console.log(countStore);
-let num = ref(0);
+// let num = ref(0);
 let sum = ref(1);
 num.value = countStore.num;
+const watchMain = countStore.$subscribe(
+  (mutation, state) => {
+    console.log("更新", mutation, state);
+    // localStorage
+    // if
+  },
+  {
+    detached: true,
+  }
+);
 function addMain() {
   countStore.handeleAdd(Number(sum.value));
 }
+function changeWeather() {
+  weather.value = "多云";
+}
+function changeMain() {
+  // num.value = 1;
+  // weather.value = "阴天";
+  // 对象
+  // countStore.$patch({
+  //   num: 8,
+  //   weather: "雨天",
+  // });
+  // 函数
+  countStore.$patch((state) => {
+    state.num += 9;
+    if (state.num > 700) {
+      state.num = 100;
+    }
+    state.weather = "大晴天";
+  });
+}
+onUnmounted(() => {
+  watchMain;
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -6,7 +6,8 @@ export const useCountStore = defineStore('count1', {
     // data
     state() {
         return {
-            num: 666
+            num: 666,
+            weather: "晴天"
         }
     },
     // computed:() => {}
@@ -21,4 +22,4 @@ export const useCountStore = defineStore('count1', {
             this.num += val;
         }
     }
-})
+})