Vue孙组件Watcher仅在组件显示时触发，需实现后台触发方案

问题根源 #

如果你的下拉菜单是用v-if控制显示，组件未打开时根本没创建实例——Watcher属于组件实例的一部分，自然不会监听Vuex数据变化。只有点击打开组件（实例创建）后，Watcher才会开始工作。

可行解决方案 #

1. 换用v-show替代v-if控制组件显示 #

如果下拉菜单不是特别复杂，把控制显示的v-if改成v-show：

• v-show是通过CSS的display: none隐藏组件，组件实例会一直存在，Watcher会持续监听Vuex数据的变化，不管组件显不显示。
• 注意：如果组件渲染成本高，一直保留实例可能有轻微性能影响，但下拉菜单这类组件基本没问题。

2. 将监听逻辑移到上层组件或Vuex内部 #

既然孙组件可能不存在，把处理逻辑放到一直存在的父/祖先组件，或者直接写到Vuex的修改逻辑里：

• 上层组件监听：在控制下拉显示的父组件里监听getSelectedFilterOptions，因为父组件实例一直存在，Watcher会全程生效。如果需要调用孙组件的方法，通过$refs获取实例（前提是孙组件用v-show或者已经渲染）：

// 父组件代码
@FilterStore.Getter('getSelectedFilterOptions') selectedItems: any

@Watch('selectedItems')
onSelectedItemsChanged() {
  // 若孙组件已存在，调用其方法
  if (this.$refs.sonDropdown) {
    (this.$refs.sonDropdown as any).doSomething()
  }
  // 或者直接在这里处理逻辑，不用依赖孙组件
}

• Vuex内部处理：在修改selectedFilterOptions的mutation/action里直接执行需要的逻辑，这样不管组件状态如何，数据变更时都会触发：

// FilterStore的mutation
SET_SELECTED_FILTER_OPTIONS(state, options) {
  state.selectedFilterOptions = options
  // 直接执行逻辑，或者通过事件通知相关组件
  this.doSomething() // 如果逻辑和Vuex无关，建议用事件总线或上层组件处理
}

3. 全局订阅Vuex状态变化 #

在App.vue或者全局初始化的地方，订阅Vuex的状态变更，只要selectedFilterOptions被修改，就触发逻辑：

// App.vue的created钩子
created() {
  this.$store.subscribe((mutation, state) => {
    // 匹配对应的mutation类型
    if (mutation.type === 'FilterStore/SET_SELECTED_FILTER_OPTIONS') {
      // 执行需要的操作，比如找到孙组件实例调用方法
      const targetComponent = this.$refs.sonDropdown
      if (targetComponent) {
        (targetComponent as any).doSomething()
      }
    }
  })
}

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