pinia简介

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

pinia 的组成

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

pinia 和 vuex 的比较

1. Vuex 中核心部分： State、Getters、Mutations（同步） 和 Actions（异步）、modules（模块）
2. Pinia 中核心部分： State、Getters 和 Actions(同步异步均支持)

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>

忘了忘了，还有安装

npm install pinia

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