Vuex: что лучше для мутаций? - PullRequest
0 голосов
/ 14 декабря 2018

Предположим, у меня есть два модуля Vuex: один хранит информацию о пользователе, а другой - для API, который экспортирует действия и запрашивает информацию о состоянии.

Модуль 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,
});

Вопрос в том, должен ли я сделать мутацию для каждого поля или одну мутацию для каждого поля в пользователе?Или я должен сделать одну мутацию для модуля, который будет принимать имя поля и это обновленное значение?

...