简介
Pinia是Vuex的升级版，使用比Vuex更加简单方便，同时支持Vue2.x和Vue3.x。Pinia是Vue的专属状态管理库，它允许你跨组件和页面共享状态。简单理解就是如果你有需要全组件都要共享访问和操作的数据，那么就用Pinia。
使用入门
安装包
npm install pinia
配置
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')
以上是适用于Vue3的，如果是Vue2还需要安装一个插件，并在应用的根部注入创建的pinia：
import {defineStore} from 'pinia'
/**
* 定义并到处容器
* 参数1：容器的ID，必须唯一，将来Pinia会把所有的容器挂载到根容器
* 参数2：选项对象
* 返回值：一个函数，调用得到容器实例
*/
export const useCounterStore = defineStore('counter',{
/**
* 类似于组件的data，用来存储全局状态的
* 1、必须是函数：这样是为了服务端渲染的时候避免交叉请求导致数据状态的污染
* 2、必须是箭头函数，为了更好的TS类型推导
*/
state:() => {
return {
count:0
}
},
/**
* 类似于组件的computed，用来封装计算属性，有缓存的功能
*/
getters:{
double:(state) => state.count * 2
},
/**
* 类似于组件的methods，封装业务逻辑，修改state
*/
actions:{
increment(){
this.count++
}
}
})
以上是展示的Option Store方式创建Store，还有一种就和setup函数类似的Setup Store创建方式：
坑点
- 不要直接解构state，因为state原理就是使用reactive进行封装，所以reactive有的缺点它也有（比如解构后失去响应性）。如果先使用解构方式访问，Pinia提供了
storeToRefs()
- 不能在
actions中定义箭头函数，this的指向会混乱。 -
getters和computed类似，对数据会有缓存，没有改变时多次调用都会调用缓存的数据。
使用
- state的基本使用
<script setup>
import { useCounterStore } from "../../store/index";
const mainstore = useCounterStore()
const handleChangeState = () => {
//方式一，最简单的方式
mainstore.count++
//方式二，需要修改多个数据,建议使用$patch 批量更新（内部有性能优化）
mainstore.$patch({
count: mainstore.count + 1,
message:'changed info',
arr:[...mainstore.arr,66]
})
//方式三:$patch一个函数,更好的批量更新方式
mainstore.$patch(state => {
state.count++
state.message = 'info3'
state.arr.push(99)
})
}
</script>
以上方法都可以放到actions中做处理，同样可以通过this.$patch的方式批量操作状态
- getters的使用
- actions的使用
类似
getters，不同的是，action可以是异步的，可以在里面await调用任何API，以及其他的action。
访问其他store上的action
- 订阅Action（
store.$onAction()）
可以通过
store.$Action()来监听action和它们的结果。传递给它的回调函数会在action本身之前执行。
after表示在promise解决之后，允许你在action解决后执行一个回调函数。
onError允许你在action抛出错误或reject时执行一个回调函数。
这些函数对于追踪运行时错误非常有用。
const unsubscribe = someStore.$onAction(
({
name, // action 名称
store, // store 实例，类似 `someStore`
args, // 传递给 action 的参数数组
after, // 在 action 返回或解决后的钩子
onError, // action 抛出或拒绝的钩子
}) => {
// 为这个特定的 action 调用提供一个共享变量
const startTime = Date.now()
// 这将在执行 "store "的 action 之前触发。
console.log(`Start "${name}" with params [${args.join(', ')}].`)
// 这将在 action 成功并完全运行后触发。
// 它等待着任何返回的 promise
after((result) => {
console.log(
`Finished "${name}" after ${
Date.now() - startTime
}ms.\nResult: ${result}.`
)
})
// 如果 action 抛出或返回一个拒绝的 promise，这将触发
onError((error) => {
console.warn(
`Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
)
})
}
)
// 手动删除监听器
unsubscribe()
默认情况下，action订阅器会被绑定到添加它们的组件上（如果store在组件的setup()内）。这意味着，当组件被卸载时，它们将被自动删除。如果你想在组件卸载时依旧保留它们，就将true作为第二个参数传递给action订阅器，以便将其从当前组件中分离：
<script setup>
const someStore = useSomeStore()
// 此订阅器即便在组件卸载之后仍会被保留
someStore.$onAction(callback, true)
</script>
