vue3

16.vue3/project/src/components/Counter.vue

@@ -3,24 +3,33 @@
     <h1>Counter</h1>
     <h2>当前值为:{{ sum }}</h2>
     <button @click="changeMain">修改</button>
+    <h2>双倍:{{ bigSum }}</h2>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from "vue";
+import { ref, reactive, onUnmounted } from "vue";
 import { useCountStore } from "../store/count";
 import { storeToRefs } from "pinia";
 // console.log(useCountStore());
 const useCount = useCountStore();
-const { sum } = storeToRefs(useCount);
+const { addSum } = useCount;
+const { sum, bigSum } = storeToRefs(useCount);
+const aaa = useCount.$subscribe((mutation, state) => {
+  console.log(mutation, "mmm");
+  console.log(state, "sss");
+});
 function changeMain() {
   //   useCount.sum = 999;
   console.log(useCount);
   //   useCount.$patch({
   //     sum: 111,
   //   });
-  useCount.addSum(10);
+  addSum(10);
 }
+onUnmounted(() => {
+  aaa();
+});
 </script>
 
 <style lang="scss" scoped>

16.vue3/project/src/store/count.js

@@ -7,6 +7,10 @@ export const useCountStore = defineStore('count1', {
             sum: 10
         }
     },
+    // computed
+    getters: {
+        bigSum: (state) => state.sum * 2,
+    },
     // methods
     actions: {
         addSum(val) {