Vue3 Options API下如何监听全局store对象的状态变化？

问题分析 #

你尝试用Options API的watch选项监听自定义composable store的状态，但两种写法都失效，核心原因：

1. 直接监听'storeMajorEnableState_.state'时，若state是嵌套响应式对象，未开启deep监听则无法捕捉内部属性变化；
2. 监听'storeMajorEnableState_.getters.getMajorEnableState()'的写法错误，Vue无法解析带函数调用的字符串路径。

正确实现方式 #

假设你已在组件的setup()中正确引入并初始化了composable store，以下是两种可行的监听配置：

import StoreMajorEnableState from '@/store/StoreMajoreEnableState'

export default {
  setup() {
    // 调用composable获取store实例并暴露给Options API
    const storeMajorEnableState_ = StoreMajorEnableState()
    return { storeMajorEnableState_ }
  },
  watch: {
    // 方式1：监听整个state对象（适用于关注state整体变化的场景）
    'storeMajorEnableState_.state': {
      handler(newVal, oldVal) {
        console.log('state updated:', newVal, oldVal)
      },
      deep: true // 必须开启deep，否则无法监听嵌套属性变化
    },

    // 方式2：监听getter返回的具体值（精准监听，推荐）
    majorEnableState: {
      // 通过get函数返回要监听的目标值
      get() {
        return this.storeMajorEnableState_.getters.getMajorEnableState()
      },
      handler(newVal) {
        console.log('major enable state changed:', newVal)
      }
    }
  }
}

更灵活的写法（结合Setup中的watch函数） #

如果不需要严格局限于Options API的watch选项，直接在setup()中使用Vue的watch函数会更直观：

import { watch } from 'vue'
import StoreMajorEnableState from '@/store/StoreMajoreEnableState'

export default {
  setup() {
    const store = StoreMajorEnableState()

    // 监听state的深层变化
    watch(
      () => store.state,
      (newVal, oldVal) => {
        console.log('state changed:', newVal, oldVal)
      },
      { deep: true }
    )

    // 监听getter返回的具体值（无需deep）
    watch(
      () => store.getters.getMajorEnableState(),
      (newVal) => {
        console.log('major enable state updated:', newVal)
      }
    )

    return { store }
  }
}

关键注意事项 #

• 确保composable store内部的state是用ref或reactive创建的响应式对象，否则无法被Vue监听；
• 监听嵌套对象时，必须开启deep: true选项；
• 监听getter时，要通过函数返回getter的调用结果，不能直接写函数调用的字符串路径。

内容的提问来源于stack exchange，提问作者user22470297