如何监视vuex存储中的深层(嵌套)更改？

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    // 定义需要监视的state属性
    user: {
      name: 'John',
      age: 25
    }
  },
  mutations: {
    // 定义修改state属性的方法
    updateUser(state, payload) {
      state.user = payload;
    }
  }
});

export default store;

import { mapState } from 'vuex';

export default {
  computed: {
    // 使用mapState辅助函数将state属性映射到组件的计算属性中
    ...mapState(['user'])
  },
  created() {
    // 监视user对象的变化
    this.$store.watch(
      (state) => state.user,
      (newValue, oldValue) => {
        // 在回调函数中处理深层更改的逻辑
        console.log('user对象发生了更改');
        console.log('新值:', newValue);
        console.log('旧值:', oldValue);
      },
      { deep: true } // 设置deep选项为true，使watch方法深度监视对象的变化
    );
  }
};