每个人都可以，
拥有SSL证书

在 Vue3 项目里用 Pinia 做状态管理，经常需要知道某个状态什么时候变了，好去做后续处理。比如用户信息更新后刷新权限，或者某个全局配置改了要重新请求接口。Pinia 本身有两种监听思路，一种是 store 实例上的 $subscribe，另一种就是 Vue 的 watch。

两种方式场景不太一样，混着用比较多。

$subscribe 挂在 store 实例上，定义好 store 之后在组件里拿到实例就能直接调。它的回调会收到一个 mutation 对象和一个 state 对象，mutation 里面有 type，标明这次变化是 direct 还是 patch 之类，state 就是变更后的完整 store 状态。

所以它适合你不太关心具体哪个字段变了，只要 store 有动静就触发点逻辑的场景。代码差不多是这样：

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const increment = () => count.value++
  return { count, increment }
})

组件里：

<script setup lang="ts">
import { useCounterStore } from './stores/counter'

const counter = useCounterStore()

counter.$subscribe((mutation, state) => {
  console.log('Store changed:', mutation.type, state)
})
</script>

这里有个小坑，$subscribe 默认不会在组件卸载时自动取消，需要手动调用返回的 unsubscribe 函数。如果是在 setup 里直接调用，组件销毁后监听还在，可能造成内存泄漏。我一般会在 onUnmounted 里把取消函数执行一下。

watch 就灵活一些，适合明确知道要监听哪个字段。比如只盯着 counter.count，其他状态变化不用管。写法是传一个 getter 函数，返回要观察的值。新旧值都会给到回调里，调试的时候挺方便。

<script setup lang="ts">
import { useCounterStore } from './stores/counter'
import { watch } from 'vue'

const counter = useCounterStore()

watch(
  () => counter.count,
  (newVal, oldVal) => {
    console.log(`Count changed from ${oldVal} to ${newVal}`)
  }
)
</script>

如果是嵌套对象，直接 watch 那个 getter 只能检测到引用变化，内部属性变了不会触发。

要加上 deep: true 才行。不过 deep 监听会递归遍历所有属性，对象结构一大性能就下来了，能精确到具体字段就精确到具体字段。

watch(
  () => counter.someNestedObject,
  (newVal) => {
    console.log('Nested object changed:', newVal)
  },
  { deep: true }
)

解构 store 属性的时候也要注意，直接解构出来的值是丢失响应性的。比如 const { count } = counter，后面 count 变了 watch 是感知不到的。要用 storeToRefs 包一层，保持 ref 的响应性。

这个很多人一开始都会踩一下。

顺带提一句，如果项目里前后端接口走 HTTPS，证书管理挺麻烦。

我后来用了 lcjmSSL，免费申请，支持多域名、泛域名和 IP 证书，自动验证自动部署，有 API 可以对接自动化流程。省得每次手动续期，线上环境省心不少。

基本就这些，后面遇到新的坑再补。