pinia

17.Vue3/project4/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "pinia": "^3.0.4",
+    "pinia-plugin-persistedstate": "^4.7.1",
     "vue": "^3.5.26"
   },
   "devDependencies": {

17.Vue3/project4/src/components/Count.vue

@@ -4,16 +4,16 @@
     <h3>初始值:{{ count }}--变大{{ bigCount }}</h3>
     <h3>{{ hi }}--变大写{{ bigWord }}</h3>
     <h3>
-      <input type="text">
+      <input type="text" v-model.number="inpNum">
       <br>
       <br>
-      <select>
+      <select v-model.number="num">
         <option value="10">10</option>
         <option value="15">15</option>
         <option value="20">20</option>
       </select>
     </h3>
-    <button>添加数值</button>
+    <button @click="handleNum">添加数值</button>
     <button @click="handleAdd1">同步count+1</button>
     <button @click="handleAdd2">异步count+2</button>
   </div>
@@ -22,14 +22,28 @@
 <script lang="ts" setup>
 import {ref,computed} from "vue" 
 import { storeToRefs } from "pinia";
-import { useCountStore } from "@/store/count"; 
+import { useCountStore } from "@/store/count1"; 
 const counter = useCountStore();
 console.log(counter);
+// 修改方式3种
+// counter.count += 20; // 方式1
+
+// 批量修改
+// counter.$patch({
+//   count: 777,
+//   hi: 'hello World'
+// })
+
+// actions修改
+counter.asyncAddCount2(10);
+// console.log(counter.$onAction,'$$$$$')
 let {count,bigCount,hi,bigWord} = storeToRefs(counter);
 // let count = ref(5);
 // let bigCount = computed(()=>{
 //     return count.value * 3;
 // })
+let num = ref(0);
+let inpNum = ref(0);
 function handleAdd1() {
   console.log("同步count+1");
   counter.addCount();
@@ -38,6 +52,40 @@ function handleAdd2() {
   console.log("异步count+1");
   counter.asyncAddCount();
 }
+function handleNum() {
+  // console.log(num.value);
+  // console.log(count.value)
+  // if(num.value > 0){
+  //   count.value += num.value
+  // }
+  // if(inpNum.value >0){
+  //   count.value += inpNum.value
+  // }
+  // counter.asyncAddCount2(num.value)
+  // counter.count = 12;
+  // counter.$reset();
+  // console.log("重置")
+  counter.$dispose();
+}
+counter.$onAction(({ name,args,after, onError }) => {
+  console.log( name,args)
+  // 你可以在这里创建所有钩子之间的共享变量，
+  // 同时设置侦听器并清理它们。
+  after((resolvedValue) => {
+    console.log('action 1');
+    // 可以用来清理副作用
+    // `resolvedValue` 是 action 返回的值，
+    // 如果是一个 Promise，它将是已解决的值
+  })
+  onError((error) => {
+    // 可以用于向上传递错误
+    console.log('action 2');
+  })
+})
+counter.$subscribe((mutation, state) => {
+  console.log(mutation, state,'$subscribe');
+})
+
 </script>
 
 <style lang="scss" scoped>

17.Vue3/project4/src/main.ts

@@ -1,10 +1,12 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import PiniaPluginPerSistedstate from 'pinia-plugin-persistedstate'
 // import router from  '.'
 // 先引入创建pinia方法
 import { createPinia } from 'pinia'
 // createApp(App).mount('#app')
 const app = createApp(App)
 const pinia = createPinia();
-app.use(pinia)
+pinia.use(PiniaPluginPerSistedstate);
+app.use(pinia);
 app.mount('#app')

17.Vue3/project4/src/store/count.ts

@@ -29,17 +29,23 @@ export const useCountStore = defineStore('count1', {
             console.log("addCount1")
             this.count += 2;
         },
+        addCount3(val:number) {
+            this.count += val;
+        },
         // 异步
         async asyncAddCount() {
             console.log("执行")
             // await new Promise((reslove)=>setTimeout(reslove,1000));
             // this.addCount()
             // await new Promise((reslove)=>setTimeout(reslove,1000));
-            await this.addCount1();
-            // await setTimeout(() => {
-            //     this.addCount1()
-            //     }, 1000);
+             this.addCount1();
             console.log("结束", this.count);
+        },
+        async asyncAddCount2(x:number) {
+            await setTimeout(() => {
+                this.addCount3(x);
+            }, 2000)
         }
+
     }
 });

17.Vue3/project4/src/store/count1.ts

@@ -0,0 +1,36 @@
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+export const useCountStore = defineStore('count1', () => {
+    const count = ref(666);
+    let hi = ref('hello piniaa');
+
+    const bigCount = computed(() => count.value * 3);
+    const bigWord = computed(() => hi.value.toUpperCase());
+
+    function addCount() {
+        count.value++;
+    }
+    function addCount1() {
+        console.log("addCount1")
+        count.value += 2;
+    }
+    function addCount3(val: number) {
+        count.value += val;
+    }
+
+    const asyncAddCount = async () => {
+        await new Promise((reslove) => setTimeout(reslove, 1000));
+        addCount1();
+
+    }
+    const asyncAddCount2 = async (x: number) => {
+        await setTimeout(() => {
+            addCount3(x);
+        }, 2000)
+    }
+    return { count, hi, bigCount, bigWord, addCount, addCount1, addCount3, asyncAddCount, asyncAddCount2 }
+}, {
+    persist: true
+}
+)