vue2 组件中监听 Vuex 中 state 的值可以使用 mapState 。

官网链接

• mapState 辅助函数帮助我们生成计算属性. State|Vuex
• mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。Getter | Vuex (vuejs.org)

mapState 使用方法

1. Vuex 中数据： state：{ message:"" }

2. 在组件 A 中导入 mapState ：import { mapState } from 'vuex'

3. 在组件 A 的计算属性中使用对象展开运算符将 state 的值 混入 computed 对象中：

   //  A组件中映射 state数据 到计算属性
   computed: {
       ...mapState(['message'])
   }

4. 在组件 A 的 watch 中监听 message

   watch: {
       // 监听vuex中的数据
       message(newValue,oldValue) {
           console.log('监听vuex中的message | newValue', newValue);
           console.log("oldValue",oldValue)
       }
   }

参考文档

• 监听 Vuex 中的数据变化 - 资深 if-else 侠 - 博客园 (cnblogs.com)
• Vuex 入门（2）—— state,mapState,...mapState 对象展开符详解-CSDN 博客
• Vuex 详解一：彻底弄懂 state、mapState、mapGetters、mapMutations、mapActions
• ...mapstate 和...mapgetters 的区别