Vuex：如何判断用户编辑后状态是否为脏数据/初始状态？

针对你遇到的问题，不用全量复制状态做对比，这里有几个轻量可行的方案：

1. 给可编辑字段绑定原始值快照 #

在每个Vuex模块初始化加载数据时，给每个需要编辑的字段单独存储原始值，比如用前缀_original区分。举个例子：

// 模块state
state: {
  name: '',
  _originalName: '',
  age: 0,
  _originalAge: 0
}

// 初始化数据时同步保存原始值
actions: {
  async loadUserData({ commit }) {
    const data = await fetchUserApi();
    commit('SET_USER_DATA', data);
    commit('SET_ORIGINAL_USER_DATA', data);
  }
}

mutations: {
  SET_USER_DATA(state, data) {
    state.name = data.name;
    state.age = data.age;
  },
  SET_ORIGINAL_USER_DATA(state, data) {
    state._originalName = data.name;
    state._originalAge = data.age;
  },
  UPDATE_NAME(state, value) {
    state.name = value;
  }
}

之后判断未保存更改时，只需要对比每个字段和对应原始值：

const hasUnsavedChanges = (state) => {
  return state.name !== state._originalName || state.age !== state._originalAge;
};

这种方式只跟踪需要编辑的字段，内存开销极小，而且判断逻辑精准，改回原值后能正确识别状态一致。

2. 用字段级修改标记替代全局isEdited #

如果模块里字段较多，可以给每个可编辑字段加一个_isModified标记，通过修改逻辑自动更新状态：

// state里新增标记
state: {
  name: '',
  _originalName: '',
  _isNameModified: false,
  // ...其他字段同理
}

// 在模块的getters里汇总状态
getters: {
  hasUnsavedChanges: (state) => {
    return state._isNameModified || state._isAgeModified || ...;
  }
}

// 修改字段时同步更新标记
mutations: {
  UPDATE_NAME(state, value) {
    state._isNameModified = value !== state._originalName;
    state.name = value;
  }
}

这样每次修改字段时自动更新标记，改回原值会自动把标记置为false，全局状态判断直接取getter的汇总结果即可。

3. 基于mutation的统一变更追踪 #

如果你的模块有规范的修改类mutation命名，可以用Vuex的subscribe功能统一处理原始值保存和修改标记：

// 在store初始化时订阅mutation
store.subscribe((mutation, state) => {
  // 假设修改类mutation命名为【模块名/UPDATE_字段名】
  if (mutation.type.match(/^\w+\/UPDATE_\w+$/)) {
    const [moduleName, actionName] = mutation.type.split('/');
    const field = actionName.split('_')[1].toLowerCase();
    const originalField = `_original${field.charAt(0).toUpperCase() + field.slice(1)}`;
    const modifiedFlag = `_is${field.charAt(0).toUpperCase() + field.slice(1)}Modified`;

    // 仅第一次修改时保存原始值
    if (!state[moduleName][originalField]) {
      state[moduleName][originalField] = state[moduleName][field];
    }
    // 更新修改标记
    state[moduleName][modifiedFlag] = mutation.payload !== state[moduleName][originalField];
  }
});

这种方式适合多模块统一管理，不用每个模块重复写初始化逻辑，但需要提前规范mutation的命名规则。

以上方案都比全量状态对比高效，而且能精准识别“改了又改回”的场景，根据你的模块复杂度选一个最适配的就行。

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