首先是在vuex中想要用使用state中的数据，需要通过action方法经由commit去调用mutations方法，这样的方法不仅麻烦，而且容易遗漏步骤，非常难受，所以到了vue3，尤大神也发现了其中的问题，就有了几乎就是vuex5的pinia

1.安装引入

npm install pinia

2.引入与使用store.js中

// 定义容器 
import { defineStore } from 'pinia'
// 参数1：容器的ID，必须唯一，将来Pinia会把所有的容器挂载到根容器
export const useStore = defineStore ('main',{
// 用来存储全局状态的
// 必须是箭头函数
    state:()=>{
        return {
            count:100, 
            foo:"lcq", 
            arr:[1,2,3] 
           } 
      },
 // 类似于组件的计算属性computed，有缓存的功能
     getters:{
     //函数接受一个可选参数：state状态对象 
     //每次调用state10,都会让count+10 并且返回结果
     count10(state){
         console.log('count10 调用了') 
         return state.count +10 
       },
 // 封装处理数据的函数（业务逻辑)：修改数据
     actions:{
     // aciton中不能使用箭头函数 箭头函数会绑定外部的 this
         changeState(num:number){
             this.count++
             this.foo = "hello"
             this.arr.push(4)
             this.$pathc
          } 
      }, 
 })

3.在页面用使用

<template>
<div>
  {{Store.count}}
  {{Store.foo}}
  {{Store.arr}}
  {{Store.count10}}
</div>
</template>

<script setup>
import {useStore} from "../../../store";
import {storeToRefs}  from 'pinia'
const Store=useStore();

//storeToRefs结构赋值:实现数据的响应式
//Pinia 其实就是把state数据都做了reactive 处理了即数据变为响应式 ref函数
const {count} = storeToRefs(Store)

//数据的修改
const handleChangeState = () =>{
  //方式一：
  // Store.count++
  // Store.foo = 'hello'

  //方式二：如果需要更新多个数据，使用$patch 批量更新:实现性能优化
  // Store.$patch({
  //   count : Store.count+1,
  //   foo:'hello',
  //   arr:[...Store.arr,4] //添加数据
  // })

  //方式三：$patch一个函数:批量更新，更好的性能
  Store.$patch(state =>{
    state.count++
    state.foo='hello'
    state.arr.push(4)
  })
}

console.log(Store.count)
</script>

另外使用时有一点是需要多多关注的

修改数据时，要去调用拥有这个数据的容器里面的actons里面的函数 因为这样子修改数据才是响应式的