30 vue3 Pinia对state的订阅监听（$subscribe）

上一篇：

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. 所达到的效果

改变前：

改变后：

下一篇：

31 vue3 Pinia监听订阅actions_十一月的萧邦-CSDN博客