vue.js - Vuex:突变的最佳实践是什么?
问题描述
假设我有两个 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,
});
问题是 - 我应该为每个字段做一个突变,还是应该为用户的每个字段做一个突变?或者我应该为一个模块进行一个突变,它将接受字段名称并且它是更新的值?
解决方案
推荐阅读
- laravel - 致命错误:已用完允许的 134217728 字节内存大小(尝试分配 53091665 字节)-Linode 服务器图像上传
- http - 如何在 POST 中的 JSON 中发送 JSON
- java - AIX - 无法创建 VM 线程。系统资源不足
- scala - 如何在 Play 框架的 Scala 模板中的 if 块中添加多个“OR”和“AND”条件
- llvm - 从分支指令中提取 MachineBasicBlock
- sql - Oracle Db:查询 Ctx_Ddl 首选项
- javascript - 如何将右键单击对话框上的画布保存为 jpg
- r - 列 dplyr 的 row_number 等价物
- javascript - 使用google api测量3个标记之间的距离
- github - github上每个作业的无人机更新状态