监听Pinia仓库中的数据变化

当仓库中state数据发生变化时，可以通过$subscribe进行监听

<script setup>
    import { storeToRefs } from 'pinia'
    import useStore from './store'
    const { test } = useStore()
    const { name, website } = storeToRefs(test)
  // 监听仓库数据变化
    const subscribe = test.$subscribe((mutation, state) => {},{})

  // 触发action
    test.changeName('liaoliao')
</script>

详解

store.$subscribe((mutation, state)=>{} , {})

$subscribe()有两个参数

第一个参数

回调函数 函数带有两个参数mutation和state

mutation

对象 有三个属性 events、storeId、type

events 包含state变化前后的数据

{
    "effect": {
                     ...
    },
    "target": {
        "name": "liaoliao",
        "website": "https://liaooo.cn"
    },
    "type": "set",
    "key": "name",
    "newValue": "liaoliao",
    "oldValue": "liao"
}

storeId

当前仓库的名字

storeID: "test"

type

用什么方式触发变化

type: "direct"
// "direct" 通过 action 变化的
// "patch object" 通过 $patch 传递对象的方式改变的
// "patch function"  通过 $patch 传递函数的方式改变的

第二个参数

对象 一些参数配置

{
  detached: false,
  immediate:false,
  deep:false,
  flush:'···',
}

detached

布尔值

默认false 订阅所在的组件被卸载时，订阅停止

如果设置detached值为true 时，即使所在组件被卸载，订阅依然生效

主动停止订阅

const subscribe = test.$subscribe((mutation, state) => {},{})
// 调用变量主动停止订阅
subscribe()

Pinia

https://pinia.vuejs.org/core-concepts/state.html#subscribing-to-the-state

Vuex

https://vuex.vuejs.org/zh/api/index.html#subscribe