Pinia对store数据进行的订阅监听

 

Vue项目在开发过程中，我们需要将一些跨组件使用的的数据在pinia中进行状态管理，组件在初始化的时候我们能通过onMounted,computed,watch,watchEffect获取到存储在pinia state中的内容，有一些特殊情况，在组件初始化之后我们无法通过以上四种情况获取state中的内容，这时候我们怎么做呢？
这时候我们就需要用到$subscribe

基本的使用已经记录完毕了，本篇记录 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>

<script setup lang="ts">

import { watch } from 'vue';
import { mainStore } from '../store/index'
const store = mainStore()

// 监听pinia中整个state
store.$subscribe((mutation, state) => {
    console.log(state);
})
// 监听pinia中整个state
watch(store.$state, (newValue, oldValue) => {
    console.log(newValue,oldValue);
})
// 只监听pinia中某一个值的变化
watch(() => store.count, (newValue, oldValue) => {
    console.log(newValue, oldValue);
})

</script>