VueJS中结合Vuex的Form类Getter/Setter实现技术咨询

我自己写了一个Form类，专门用来处理和Vuex存储联动的表单字段——给表单可能包含的每个字段都设置了对应的getter和setter方法，在这些方法里直接完成对Vuex存储的读写操作。其中init()函数是批量设置这些getter/setter的核心方法，具体实现如下：

export class Form {
  /**
   * @param data
   */
  constructor(data) {
    this.init(data);
    this.errors = new Errors();
  }
  /**
   * 为字段初始化设置getter/setter属性
   * @param data
   */
  init(data) {
    for (const propertyData in data) {
      if (data.hasOwnProperty(propertyData) && /* 这里可补充字段有效性判断逻辑 */) {
        // 为每个字段动态绑定关联Vuex的getter和setter
        Object.defineProperty(this, propertyData, {
          get() {
            // 从Vuex读取对应字段的状态值
            return store.state.form[propertyData];
          },
          set(value) {
            // 将新值提交到Vuex更新状态
            store.commit('updateFormField', { field: propertyData, value });
          }
        });
      }
    }
  }
}

关键逻辑说明 #

• 构造函数：接收表单初始数据后，先调用init()完成字段的getter/setter绑定，同时初始化错误处理实例errors，方便后续做表单校验逻辑
• init()方法：通过遍历传入的字段数据，利用Object.defineProperty为每个字段动态创建getter和setter，直接和Vuex的状态进行绑定——这样操作Form实例的字段时，就会自动同步到Vuex存储中，不用手动调用Vuex的提交方法

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