Question

我来自redux（具有sagas）背景，正在设计vuex项目。我正在考虑两种不同的方式来设置动作，并寻找经验和为什么我可能会选择另一种方式的原因。例如，考虑操作fetchPermissions（）;

在选项A中，操作可能如下所示：

export const fetchPermissions = async ({commit}) => {
     commit('setLoading', true);
     const response = await api.get('permission/permissions');
     if(response.data === success) {
         commit('setPermissions', response.data);
         commit('setLoading', false);
     }
     else {
         commit('setError', response.data);
         commit('setLoading', false);
     }
};

上面的方法很有用，因为我可以执行一个操作来处理获取权限的整个流程，并提交所有独立的不同状态更新。效果很好，但是似乎有代码味道，即fetchPermissions不负责setPermissions。

另一种方法（也可以是redux的方法）是采取单一责任措施，类似于：

export const fetchPermissions = async ({commit}) => {
     commit('setLoading', true);
     const response = await api.get('permission/permissions');
     if(response.data === success) {
         dispatch('fetchPermissionsSuccess', response.data);
     }
     else {
         dispatch('fetchPermissionsSuccessFailure', response.data);         
     }
};


export const fetchPermissionsSuccess = async ({commit}, data) => {
     commit('setPermissions', data);
     commit('setLoading', false);
};


export const fetchPermissionsFailure = async ({commit}, error) => {
     commit('setError', error);
     commit('setLoading', true);
};

我喜欢选项A，因为这样可以使团队更轻松地进行跟踪，并将操作次数减少66％，从而减少工作量。

我喜欢选项B的“单一责任原则”心态。选项B的另一个潜在好处是，我可以创建一个服务来侦听一系列绑定动作，并根据是否看到一个动作来执行某项服务。例如，您可能有一个服务，该服务每次发生任何actionSuccess或actionFailure时都会提交一条消息。

是否有解决这个问题的vuex最佳实践，或者您从经验中学到的就是要走的路。

关于Vuex中单一职责操作的经验

0 个答案: