如何监听JavaScript类的属性调用，实现与Vuex状态同步读写？

嘿，我明白你不想用Proxy包装Form实例的顾虑，其实还有几个挺实用的方案能实现属性读写时同步Vuex的需求，我给你梳理一下：

方案一：手动为属性添加getter/setter #

这是最直接的方式，在Form类内部给需要联动的属性逐个定义get和set方法，直接在方法里操作Vuex仓库：

import store from './your-vuex-store-path';

class Form {
  // 读取name时从Vuex获取
  get name() {
    return store.state.form.name;
  }

  // 设置name时更新Vuex
  set name(value) {
    store.commit('form/setName', value);
  }

  // 其他需要联动的属性同理
  get email() {
    return store.state.form.email;
  }

  set email(value) {
    store.commit('form/setEmail', value);
  }
}

// 使用示例
const myForm = new Form();
myForm.name = 'Name'; // 自动触发Vuex mutation更新仓库
console.log(myForm.name); // 直接从Vuex state读取数据

优点：逻辑直观，不需要额外的包装层，完全在类内部控制属性的读写行为；
缺点：如果需要联动的属性很多，会产生大量重复代码，需要逐个编写get/set。

方案二：批量动态生成getter/setter #

如果你的Form类有大量属性需要联动，可以通过Object.defineProperty在构造函数里批量生成getter和setter，减少重复代码：

import store from './your-vuex-store-path';

class Form {
  constructor() {
    // 定义需要和Vuex联动的属性列表
    const linkedFields = ['name', 'email', 'phone', 'address'];

    linkedFields.forEach(field => {
      Object.defineProperty(this, field, {
        get() {
          // 从Vuex state读取对应属性
          return store.state.form[field];
        },
        set(value) {
          // 自动生成mutation名称（需要和Vuex里的命名规范一致）
          const mutationName = `form/set${field.charAt(0).toUpperCase() + field.slice(1)}`;
          store.commit(mutationName, value);
        },
        enumerable: true, // 让属性可以被遍历到
        configurable: true // 允许后续修改属性配置（可选）
      });
    });
  }
}

// 使用方式和之前一致
const myForm = new Form();
myForm.phone = '123456789'; // 自动同步到Vuex

优点：只需要维护属性列表即可，批量生成逻辑，避免重复代码；
注意：需要保证Vuex中的mutation命名和自动生成的规则一致（比如setName对应name属性），如果有特殊命名的mutation，可以单独处理。

方案三：结合Vue的响应式特性（Vue项目专属） #

如果你的项目本身基于Vue，可以利用Vue自带的响应式系统来实现联动，不用自己写监听逻辑：

import Vue from 'vue';
import store from './your-vuex-store-path';

class Form {
  constructor() {
    // 将Vuex的form state映射到实例，并转为响应式对象
    Vue.util.defineReactive(this, '_formData', {...store.state.form});

    // 监听_formData的变化，自动同步到Vuex
    Object.keys(this._formData).forEach(key => {
      Vue.prototype.$watch(
        () => this._formData[key],
        (newValue) => {
          const mutationName = `form/set${key.charAt(0).toUpperCase() + key.slice(1)}`;
          store.commit(mutationName, newValue);
        },
        { deep: true } // 支持嵌套对象的深度监听
      );
    });

    // 代理属性到_formData，实现直接通过myForm.name访问的便捷性
    Object.keys(this._formData).forEach(key => {
      Object.defineProperty(this, key, {
        get() {
          return this._formData[key];
        },
        set(value) {
          this._formData[key] = value;
        },
        enumerable: true
      });
    });
  }
}

// 使用示例
const myForm = new Form();
myForm.address = 'Some Street 123'; // 自动同步到Vuex

优点：借助Vue成熟的响应式系统，不需要自己实现属性监听，适合Vue生态的项目；
注意：这里用到了Vue内部的defineReactive方法，虽然在实际项目中很稳定，但如果Vue版本大更新可能需要调整。

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