vue.js - Vuex：突变的最佳实践是什么？

Question

假设我有两个 Vuex 模块，一个保留用户信息，另一个模块用于 API，用于导出操作和请求状态信息。

接口模块：

const methods = ['register', 'login', 'logout', 'info'];
const states = {};

methods.forEach((item) => {
  states[item] = {
    state: {
      isRunning: false,
      isSucceeded: false,
      isFailed: false,
    },
    data: null,
    error: null,
  };
});

export const state = () => ({
  ...states,
});

export const mutations = {
  UPDATE_ACTION_STATE(
    state,
    {
      actionName,
      state: { isRunning, isSucceeded, isFailed },
    },
  ) {
    state[actionName].state.isRunning = isRunning;
    state[actionName].state.isSucceeded = isSucceeded;
    state[actionName].state.isFailed = isFailed;
  },
  UPDATE_ACTION_DATA(state, { actionName, data }) {
    state[actionName].data = data;
  },
  UPDATE_ACTION_ERROR(state, { actionName, error }) {
    state[actionName].error = error;
  },
};

export const actions = {
  register: ({ commit }, payload) => {
    const {
      firstName, lastName, email, password,
    } = payload;
    commit('UPDATE_ACTION_STATE', {
      actionName: 'register',
      state: {
        isRunning: true,
        isFailed: false,
        isSucceeded: false,
      },
    });
    const request = new Promise((resolve, reject) => {
      api({
        method: 'post',
        url: '/api/registrate',
        data: {
          firstName,
          lastName,
          email,
          password,
        },
      })
        .then((response) => {
          commit('UPDATE_ACTION_STATE', {
            actionName: 'register',
            state: {
              isRunning: false,
              isFailed: false,
              isSucceeded: true,
            },
          });
          const { data } = response;
          commit('UPDATE_ACTION_DATA', {
            actionName: 'register',
            data,
          });
          resolve(response);
        })
        .catch((error) => {
          commit('UPDATE_ACTION_STATE', {
            actionName: 'register',
            state: {
              isRunning: false,
              isFailed: true,
              isSucceeded: false,
            },
          });
          commit('UPDATE_ACTION_ERROR', {
            actionName: 'register',
            error,
          });
          reject(error);
        });
    });
    return request;
  },
  login: ({ commit }, payload) => {
    const { login, password } = payload;
    commit('UPDATE_ACTION_STATE', {
      actionName: 'login',
      state: {
        isRunning: true,
        isFailed: false,
        isSucceeded: false,
      },
    });
    const request = new Promise((resolve, reject) => {
      api({
        method: 'post',
        url: '/api/login',
        data: {
          login,
          password,
        },
      })
        .then((response) => {
          commit('UPDATE_ACTION_STATE', {
            actionName: 'login',
            state: {
              isRunning: false,
              isFailed: false,
              isSucceeded: true,
            },
          });
          resolve(response);
        })
        .catch((error) => {
          commit('UPDATE_ACTION_STATE', {
            actionName: 'login',
            state: {
              isRunning: false,
              isFailed: true,
              isSucceeded: false,
            },
          });
          reject(error);
        });
    });
    return request;
  },
  logout: ({ commit }) => {
    commit('UPDATE_ACTION_STATE', {
      action: 'logout',
      state: {
        isRunning: true,
        isFailed: false,
        isSucceeded: false,
      },
    });
    const request = new Promise((resolve, reject) => {
      api({
        method: 'post',
        url: '/api/logout',
      })
        .then((response) => {
          commit('UPDATE_ACTION_STATE', {
            action: 'logout',
            state: {
              isRunning: false,
              isFailed: false,
              isSucceeded: true,
            },
          });
          resolve(response);
        })
        .catch((error) => {
          commit('UPDATE_ACTION_STATE', {
            action: 'logout',
            state: {
              isRunning: false,
              isFailed: true,
              isSucceeded: false,
            },
          });
          reject(error);
        });
    });
    return request;
  },
  info: ({ commit }) => {
    commit('UPDATE_ACTION_STATE', {
      actionName: 'info',
      state: {
        isRunning: true,
        isFailed: false,
        isSucceeded: false,
      },
    });
    const request = new Promise((resolve, reject) => {
      api({
        method: 'post',
        url: '/api/info',
      })
        .then((response) => {
          commit('UPDATE_ACTION_STATE', {
            actionName: 'info',
            state: {
              isRunning: false,
              isFailed: false,
              isSucceeded: true,
            },
          });
          resolve(response);
        })
        .catch((error) => {
          commit('UPDATE_ACTION_STATE', {
            actionName: 'info',
            state: {
              isRunning: false,
              isFailed: true,
              isSucceeded: false,
            },
          });
          reject(error);
        });
    });
    return request;
  },
};

然后是用户信息模块：

export const state = () => ({
  firstName: null,
  id: null,
  lastName: null,
});

问题是 - 我应该为每个字段做一个突变，还是应该为用户的每个字段做一个突变？或者我应该为一个模块进行一个突变，它将接受字段名称并且它是更新的值？