基本的使用已经记录完毕了，本篇记录 Pinia对store数据进行的订阅监听，更直白点说，当store中的state变化到我们想要的那个值时，我们需要去做些什么，那么我们就需要用到$subscribe
1. 新建vue3项目，安装Pinia，配置Pinia，不再多说了，不会的可以看官网也可以看我前面的几篇记录文章
2. app.js---首先声明了一个state：baseUrl,写了一个action方法，用于改变baseUrl
import {defineStore} from "pinia"
const appStore = defineStore('appStore', {
state: () => ({
baseUrl: 'https://www.baidu.com/'
}),
actions: {
changeState(params) {
// console.log('接收到的参数===>', params)
this.baseUrl = params
}
}
})
export default appStore
3. 页面调用 注释写的有点多，真实的内容并没有多少
<template>
<div>
{{ baseUrl }}
</div>
<div v-show="isShow">
该我出现了
</div>
<button @click="changeData">
通过actions改变数据
</button>
</template>
<script>
import appStore from "@/store/app"
import {storeToRefs} from "pinia"
import {ref} from "vue"
export default {
name: "PiniaSubscribe",
setup() {
const store = appStore()
const {baseUrl} = storeToRefs(store)
const afterChangeUrl = 'https://www.taobao.com/'
let isShow = ref(false)
const subscribe = store.$subscribe((mutation, state) => {
/*
* mutation主要包含三个属性值：
* events：当前state改变的具体数据，包括改变前的值和改变后的值等等数据
* storeId：是当前store的id
* type：用于记录这次数据变化是通过什么途径，主要有三个分别是
* “direct” ：通过 action 变化的
”patch object“ ：通过 $patch 传递对象的方式改变的
“patch function” ：通过 $patch 传递函数的方式改变的
*
* */
// 我们就可以在此处监听store中值的变化，当变化为某个值的时候，去做一些业务操作之类的
console.log(mutation)
console.log(state.baseUrl)
if (state.baseUrl === afterChangeUrl) isShow.value = true
else isShow.value = false
}, {detached: false}) //第二个参数options对象，是各种配置参数
//detached:布尔值，默认是 false，正常情况下，当订阅所在的组件被卸载时，订阅将被停止删除，
// 如果设置detached值为 true 时，即使所在组件被卸载，订阅依然在生效
//参数还有immediate，deep，flush等等参数 和vue3 watch的参数是一样的，多的就不介绍了，用到再看文档吧
// 停止订阅
// subscribe() //调用上方声明的变量值，示例（subscribe），即可以停止订阅
function changeData() {
store.changeState(afterChangeUrl)
}
return {
isShow,
baseUrl,
changeData
}
}
}
</script>