上一篇:
29 vue3 Pinia--getters的使用_十一月的萧邦-CSDN博客
基本的使用已经记录完毕了,本篇记录 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>
4. 所达到的效果
改变前:
改变后:
下一篇: