搭建pinia环境

1.引入依赖

npm i pinia

2.在main.ts中引入pinia

 准备一个基本的效果

<template><h2>测试一下pinia</h2><br><span>当前求和为：{{ sum }}</span><br><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="add">加</button><button @click="minus">减</button>
</template><script lang="ts" setup>import { ref } from 'vue';let sum=ref(0)let n=ref(1)function add(){sum.value+=n.value}function minus(){sum.value-=n.value}</script>

1.存储，读取数据

在src文件夹下定义一个store文件夹

count.ts

import { defineStore } from "pinia";//定义并暴露一个store  第一个参数是id
export const useCountStore=defineStore('count',{//数据state() {return{sum:0,n:1}},//方法actions:{},})

用pinia读取数据

2.修改数据

修改数据的三种方式如下

<template><h2>测试一下pinia</h2><br><span>当前求和为：{{ countStore.sum }}</span><br><select v-model.number="countStore.n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="add">加</button><button @click="minus">减</button><br><button @click="change">修改pinia里面的数据</button>
</template><script lang="ts" setup>import { ref } from 'vue';import { useCountStore } from '../store/count';
import { sum } from 'element-plus/es/components/table-v2/src/utils.mjs';let countStore=useCountStore()function add(){countStore.sum+=countStore.n}function minus(){countStore.sum-=countStore.n}function change(){//1.直接修改//countStore.sum=666//2.批量修改
/*         countStore.$patch({sum:999,n:88}        ) *///3.借助action修改（action中可以编写一些业务逻辑）  countStore.Multiply(10) }</script>

count.ts

import { defineStore } from "pinia";//定义并暴露一个store  第一个参数是id
export const useCountStore=defineStore('count',{//数据state() {return{sum:0,n:1}},//方法actions:{Multiply(value:number){this.sum*=value}},})

3.storeToRefs（toRefs）

• 借助storeToRefs将store中的数据转为ref对象，方便在模板中使用。

• 注意：pinia提供的storeToRefs只会将数据做转换，而Vue的toRefs会转换store中的所有进行转换(包括数据和方法，而方法是不需要我们进行转换的)

4.getters（computed）

定义

 使用

这个东西相当于前面学过的computed 

5.$subscribe的使用（watch）

通过 store 的 $subscribe() 方法侦听 state 及其变化

    //mutate:本次修改的信息//state：发生了什么变化countStore.$subscribe((mutate,state)=>{console.log("这个仓库里面的数据发生了改变",mutate,state)})

点击”加“按钮

这个东西相当于前面学过的watch