Vue/Vuex中如何深度监听mapState映射的state对象的内部属性

选项式API实现 #

方法1：精准监听嵌套属性（优先推荐） #

直接在watch中写属性路径字符串，不需要开启深度监听，只有isActive变化时才会触发回调，性能最优：

export default {
  computed: {
    ...mapState('data/story', {
      fullStories: 'stories',
    })
  },
  watch: {
    'fullStories.isActive'(newVal, oldVal) {
      // 此处编写属性变化后的业务逻辑
      console.log('isActive更新为：', newVal)
    }
  }
}

如果需要组件初始化时就触发一次回调，可以添加immediate配置：

watch: {
  'fullStories.isActive': {
    handler(newVal) {
      // 业务逻辑
    },
    immediate: true
  }
}

方法2：开启深度监听整个对象 #

如果需要同时监听fullStories下多个属性的变化，可以开启深度监听：

export default {
  computed: {
    ...mapState('data/story', {
      fullStories: 'stories',
    })
  },
  watch: {
    fullStories: {
      handler(newVal) {
        console.log('isActive最新值：', newVal.isActive)
        // 业务逻辑
      },
      deep: true, // 开启深度监听，对象内部任意属性变化都会触发回调
      // immediate: true 按需添加，初始化触发回调
    }
  }
}

组合式API实现（Vue3 / Vue2 安装composition-api插件场景） #

在setup中通过返回目标属性的函数来精准监听：

import { computed, watch } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()
    const fullStories = computed(() => store.state['data/story'].stories)

    // 监听isActive变化
    watch(() => fullStories.value.isActive, (newVal, oldVal) => {
      // 业务逻辑
      console.log('isActive更新为：', newVal)
    }, {
      // immediate: true 按需添加
    })

    return {
      fullStories
    }
  }
}

如果是<script setup>语法糖写法逻辑完全一致，不需要写return语句即可在模板中使用变量。

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