Pinia 是 Vue 的存储库，它支持vue2和vue3。因此在写项目中，我们可以使用pinia代替vuex,就我个人而言，我觉得pinia使用起来方便的多。
与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。
具体差异和Pinia优势查看Pinia官网： Pinia 中文文档
基于vue3
Store仓库配置文件结构及说明：
import { defineStore } from 'pinia'
// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
state:()=>{ //数据存放在函数返回值对象中
return {
msg:"第一次使用pinia",
number:10
}
},
getters:{//相当于计算属性
em:(state)=>{ //形参中能够接收到数据
}
},
actions:{
//处理程序
// 写声明式函数时可以使用this,也能获取到state内的数据，如：
add(){
this.number+1
},
//也可以在形参中接收到state，如：
add1(state){
state.number+1
}
}
})其它的配置自行查照文档。
修改state状态
接下来讲一下，在组件中如何修改state中的值。
1、直接引入store，并进行修改，如store.msg="**",store是一个响应性对象 因此可以修改并刷新
<script setup>
import { useStore } from '../store/index.js'
let Store=useStore()
// 1、直接修改
let change1=()=>{ //触发这个函数时修改
Store.msg="修改1"
}
</script>
2、在使用时，我们有时不想Store.msg取值。我们一般就是解构赋值取出每一项；如果我们取出store的数据后再修改取出的这个值，不再具备响应式，因此我们还需要用到toRefs处理
<script setup>
import { useStore } from '../store/index.js'
import { toRefs } from "vue";
let Store=useStore()
// //2、单独导出时利用toRefs把响应式对象的属性解构为响应性的变量
let change2=()=>{
let {msg}=toRefs(Store)
msg.value="修改2"
}
</script>
3、Pinia提供的方法，store.$reset()将状态 重置为初始值，无论我们怎么修改store仓库的值，只要我们代码运行store.$reset()后就恢复到初始状态。
4、Pinia提供的方法，store.$patch()修改数据，可以同时修改多条数据，传入的参数有两种情况：1、对象形式 2、函数
对象形式：根据对应的属性名去修改state中的数据
let change4=()=>{
Store.$patch({
number:1,
msg:"666"
})
}
修改原则：我们传入对象的属性名与state内属性名对应才去覆盖，如果属性名不对应那就不会生效，虽然会加到state中，但是我们不能在页面使用。
函数形式： 传入对象这种应用某些突变非常困难或代价高昂：任何集合修改（例如，从数组中推送、删除、拼接元素）都需要您创建一个新集合。 正因为如此，$patch 方法也接受一个函数来批量修改集合内部分对象的情况：
let change5=()=>{
Store.$patch((state)=>{//形参中可以接收到state
state.number=1
state.msg="666"
})
}
以函数形式修改，为什么不直接在外部Store点属性的方式修改呢？
Store. $patch 的方式修改时，状态只会刷新一次,可以批量修改。
5、替换state
//store将其
$state属性设置为新对象来替换 Store 的整个状态Store.$state = { number: 666, name: 'Paimon' }
订阅状态
Pinia给我们提供了一个$subscrible方法来查看状态及其变化，当我们state中数据发生改变后这个方法就会触发，使用 $subscrible() 的优点是 subscriptions 只会在 patches 之后触发一次
写法：
Store.$subscribe((mutation, state) => {
//处理程序
console.log(mutation,state);
})
其中mutation参数对象中包含三个参数：
1、storeId 值为当前Store仓库的ID
2、type 值为修改的形式，如直接修改就是direct ,通过$patch修改的值为patch object或patch function
3、events 值中保存了修改前后对应的数据
如果是$patch方法通过传入对象修改时，还会多一个属性payload，里面存放的是传入的对象
第二个参数：state表示状态更新后，Store中的state