pinia: watch 状态的变化

一个状态管理相关的 watch 操作

代码

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useSomeStore } from '~~/store/some'
import { watch } from 'vue';

const some = useSomeStore()
// This will also create refs for properties added by plugins
// but skip any action or non reactive (non ref/reactive) property
const { someGetter, someStateVar } = storeToRefs(some)
watch(someGetter, () => {
  console.log('some changed', someGetter)
})
watch(someStateVar, () => {
  console.log('some state var changed', someStateVar)
})
</script>

使用 subscribe

默认 deep
但无法拿到变化的 path
可以拿到最精确的 changeValue(oldValue/newValue)

someStore.$subscribe((mutation, state) => {
  // import { MutationType } from 'pinia'
  mutation.type // 'direct' | 'patch object' | 'patch function'
  // 和 cartStore.$id 一样
  mutation.storeId // 'cart'
  // 只有 mutation.type === 'patch object'的情况下才可用
  mutation.payload // 传递给 cartStore.$patch() 的补丁对象。

  // 每当状态发生变化时，将整个 state 持久化到本地存储。
  localStorage.setItem('cart', JSON.stringify(state))
})

使用 vue

watch(
  pinia.state,
  (state) => {
    // 每当状态发生变化时，将整个 state 持久化到本地存储。
    localStorage.setItem('piniaState', JSON.stringify(state))
  },
  { deep: true }
)

代码

使用 subscribe

使用 vue

参考