pinia

12.vue3/project4/src/components/Count.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
     <h1>计数器</h1>
-    <h3>初始值:{{ sum }}</h3>
+    <h3>初始值:{{ sum }},变大十倍:{{ bigSum }}</h3>
+    <button @click="changeAdd">增加</button>
   </div>
 </template>
 
@@ -9,9 +10,16 @@
 import {ref,reactive} from "vue";
 import {useCountStore} from '@/store/count';
 import {storeToRefs} from 'pinia';
-// console.log(useCountStore())
+console.log(useCountStore())
 const countStore = useCountStore();
-let {sum} = storeToRefs(countStore);
+let {sum,bigSum} = storeToRefs(countStore);
+function changeAdd() {
+    // sum.value++;
+    // countStore.add();
+    countStore.$patch({
+        sum:countStore.sum+10
+    })
+}
 </script>
 
 <style lang="scss" scoped>

12.vue3/project4/src/store/count.ts

@@ -6,6 +6,17 @@ export const useCountStore = defineStore('count12',{
         return {
             sum:666
         }
+    },
+    // 计算属性 computed
+    getters:{
+        bigSum:(state) =>  state.sum * 10
+        // bigSum:(state) => {return state.sum * 10}
+    },
+    // 方法 methods
+    actions:{
+        add() {
+            this.sum++;
+        }
     }
     
 })