Vuex编辑保存用户时出现重复数据未更新原记录的解决方法

当前逻辑不管是新增用户还是编辑用户，都统一调用addUser mutation，这个mutation的固定逻辑是通过unshift把传入的数据插到用户列表头部，完全没有处理编辑场景下的旧数据替换逻辑。所以编辑提交后，修改后的数据会被直接当成新用户插到列表里，原有旧条目没有被删除/替换，就出现了重复记录。页面刷新时Vuex状态会重置，重新拉取数据库里的全量用户数据，临时存在Vuex里的重复旧条目才会消失。

方案1：拆分新增/更新的mutation逻辑（逻辑更清晰，推荐） #

1. 调整mutations，单独新增编辑场景对应的更新方法，匹配用户id替换原有数据：

mutations: {
  // 新增用户专用：将新用户插入列表头部
  addUser(state, data) {
    state.users.unshift(data);
  },
  // 编辑用户专用：匹配id替换原有用户条目
  updateUser(state, data) {
    const userIndex = state.users.findIndex(user => user.id === data.id);
    if (userIndex !== -1) {
      state.users.splice(userIndex, 1, data);
    }
  }
}

2. 调整saveUser action，编辑场景下不再提交addUser，改为提交updateUser：

async saveUser({ commit }, user) {
  let createdUser;
  if (user.id) {
    createdUser = await http.put(`/users/${user.id}`, user);
    commit('updateUser', createdUser.data);
  } else {
    createdUser = await http.post('/users', user);
    commit('addUser', createdUser.data);
  }
}

方案2：合并mutation自动判断场景（代码更简洁） #

如果不想拆分两个mutation，也可以把新增和更新逻辑合并到同一个mutation里，自动根据id判断是新增还是更新：

mutations: {
  saveUser(state, data) {
    const existIndex = state.users.findIndex(user => user.id === data.id);
    if (existIndex === -1) {
      // 未匹配到同id用户，执行新增
      state.users.unshift(data);
    } else {
      // 匹配到同id用户，执行替换更新
      state.users.splice(existIndex, 1, data);
    }
  }
}

对应action里不需要区分场景，统一提交saveUser即可：

async saveUser({ commit }, user) {
  let createdUser;
  if (user.id) {
    createdUser = await http.put(`/users/${user.id}`, user);
  } else {
    createdUser = await http.post('/users', user);
  }
  commit('saveUser', createdUser.data);
}

要保证后端put接口返回的用户数据id和本地存储的用户id类型、值完全一致，比如本地存的是数字类型1，后端返回的是字符串类型"1"就会导致匹配失败，更新不生效，这种情况需要提前做类型统一转换。

内容的提问来源于stack exchange，提问作者Daniel Kołban