Vue3中使用pinia

1. pinia简介

   1. 官方地址：https://pinia.vuejs.org/；
   2. Pinia 简化了Vuex的使用，是 Vue3的新的状态管理工具；
   3. Pinia 对 ts 的支持更好，性能更优， 体积更小，没有 mutations，可用于 Vue2 和 Vue3；
   4. Pinia支持Vue Devtools、 模块热更新和服务端渲染；

2. pinia 的组成

   1. state（定义状态）、actions（定义方法）、getters（类似计算属性）。

3. pinia 和 vuex 的比较

   1. Vuex 中核心部分： State、Getters、Mutations（同步） 和 Actions（异步）、modules（模块）
   2. Pinia 中核心部分： State、Getters 和 Actions(同步异步均支持)
4. 接下来是实战使用方法，为了避免忘记，写一下笔记哈

   import { defineStore } from 'pinia';
   
   // TS 接口类型
   interface CouponStoreVo {
     tempCouponData: StoreTemplateCoupon;
   }
   
   export const useCouponStore = defineStore('couponStore', {
     state: (): CouponStoreVo => {
       return {
         data: {}
       };
     },
     actions: {
   
       // 暂存数据
       save(data: any) {
         this.data= data;
       },
   
       // 清除数据
       clear() {
         this.data= {};
       }
     }
   });
   

   组件中使用
    

   import { useCouponStore } from '@/store/index';
   
   
   <script lang="ts" setup>
   
     const couponStore = useCouponStore();
     
    // 使用仓库中的数据
      const test = ref(couponStore.state.data) 
       
   // 执行仓库中的 clear 方法
   function clearHandle() {
       couponStore.clear();
   }
       
   // 执行仓库中的 save 方法(通过调用 store 中的方法改变state 的数据)
   function saveHandle(data: any) {
       couponStore.save(data);
   }
   
   
   // 通过 $patch 方法修改数据（对pina 中的数据进行统一修改，状态只刷新一次）
   function disPatchHandle() {
       couponStore.$patch((state) => {
         state.data= '你的数据';
       });
   }
   
   // 将状态 重置 到其初始值, 当我们接收到pinia数据且对其数据进行了大量修改又想还原时，调用此方法就可以将接收的pinia数据全部重置还原
   function resetHandle() {
       couponStore.$reset()  
   }
   
   
   </script>

5. 忘了忘了，还有安装

   npm install pinia

6. 然后再main.ts 文件下，配置一下

   import { createApp } from 'vue'
   import App from './App.vue'
    
   const app=createApp(App)
    
    
    
   import { createPinia } from 'pinia' //引入pinia
   app.use(createPinia())
    
   app.mount('#app')