vue3

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

@@ -1,15 +1,26 @@
 <template>
   <div>
     <h1>Counter</h1>
-    <h2>当前值为:{{ useCount.sum }}</h2>
+    <h2>当前值为:{{ sum }}</h2>
+    <button @click="changeMain">修改</button>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive } from "vue";
 import { useCountStore } from "../store/count";
+import { storeToRefs } from "pinia";
 // console.log(useCountStore());
 const useCount = useCountStore();
+const { sum } = storeToRefs(useCount);
+function changeMain() {
+  //   useCount.sum = 999;
+  console.log(useCount);
+  //   useCount.$patch({
+  //     sum: 111,
+  //   });
+  useCount.addSum(10);
+}
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,9 +1,16 @@
 import { defineStore } from 'pinia';
 
 export const useCountStore = defineStore('count1', {
+    // data
     state() {
         return {
             sum: 10
         }
+    },
+    // methods
+    actions: {
+        addSum(val) {
+            this.sum += val;
+        }
     }
 })