如何监听Vuex嵌套模块中的state，变化时在组件内打印其值

方案1：结合mapState实现（优先满足map系列功能要求） #

情况A：模块已开启命名空间（namespaced: true，Vuex模块推荐配置） #

直接通过完整命名空间路径映射嵌套state到组件计算属性，再监听映射后的属性即可：

import { mapState } from 'vuex'

export default {
  computed: {
    // 第一个参数为嵌套模块的完整命名空间路径，第二个参数为要映射的state名数组
    ...mapState('moduleOne/moduleTwo/moduleThree', ['price'])
  },
  watch: {
    // 直接监听映射好的计算属性，变化时自动触发
    price(newVal) {
      console.log('最新price值：', newVal)
    }
  }
}

如果该模块的相关状态你在组件内使用频繁，可以先创建命名空间专用的辅助函数，简化后续写法：

import { createNamespacedHelpers } from 'vuex'
// 提前绑定目标模块的命名空间
const { mapState, mapGetters, mapActions } = createNamespacedHelpers('moduleOne/moduleTwo/moduleThree')

export default {
  computed: {
    // 无需再写命名空间路径，直接传入模块内的state名即可
    ...mapState(['price'])
  },
  watch: {
    price(newVal) {
      console.log('最新price值：', newVal)
    }
  }
}

情况B：模块未开启命名空间 #

直接通过回调函数指定嵌套state的完整路径完成映射：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      price: state => state.moduleOne.moduleTwo.moduleThree.price
    })
  },
  watch: {
    price(newVal) {
      console.log('最新price值：', newVal)
    }
  }
}

方案2：直接监听完整state路径 #

如果不需要用到map系列功能，可以直接把完整state路径作为watch的键（注意用字符串包裹）：

export default {
  watch: {
    '$store.state.moduleOne.moduleTwo.moduleThree.price'(newVal) {
      console.log('最新price值：', newVal)
    }
  }
}

如果你此前尝试该写法不生效，优先排查两个常见问题：

1. 模块路径、state名拼写错误，注意大小写敏感
2. 若你监听的是模块对象而非基础类型的price，需要额外添加deep: true配置才能监听到对象内部属性的变化

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