Question

这是我的工作，我不确定它的正确性：

//store
async addUser({commit}) {
  try {
    const {data} = await apiService.addUser()
    commit('SET_USER', data)
    commit('SET_NOTIFICATION', {type:'success', message: 'user successfuly created'})
  } catch (error) {
    commit('SET_NOTIFICATION', {type:'error', message:error})
  }

}

SET_USER(state, user) {
    state.users.push(user)
}

//my component:
async addUser() {
  this.isLoading = true
  await this.$store.dispatch('updatePatient', this.form)
  this.isLoading = false
}

合法吗？

有时候，我认为我需要根据成功或拒绝的api请求在组件内部添加更多逻辑。我应该把所有逻辑都付诸行动吗？像我现在一样吗？

也许我应该为每个动作添加一个状态状态，例如：

state {
  users: []
  postUserSuccess: null
  postUserError: false
  updateUserSuccess: null
  updateUserError: false
  // ...
}

我想在将计算出的属性映射到商店的组件中做什么吗？

您怎么看？

Answer 1

好吧，如果我们要严格遵守Vuex规则（建议您管理此规则），则必须符合以下图表：
。
该组件调用一个动作，该动作发出一个请求并管理API请求，并分派一个（或多个）变异。突变只能改变状态，然后vue组件将状态状态映射到组件中。
这是使用Vuex的最佳方法。
一旦应用程序变得越来越大，可能会发生（然后将其重构）的麻烦，即该操作可以返回一个包含API结果的Promise，但这会中断Vuex流程并带来意外错误。
您的实现看起来不错，而不是为每个操作添加一个状态属性，而应尝试创建一个常规状态错误属性并根据需要进行适当管理。

Answer 2

我不知道这是否是最佳实践，但我让组件进行了异常处理。该方法有其优点（您不必使用错误管理来污染状态）和缺点（您必须为每个操作调用重复错误管理代码）。

所有服务呼叫都将采取行动
状态只会设置为突变。
所有服务调用都将返回一个承诺，其中包含一个resolve（要在状态中加载的数据）和一个reject（要显示的消息错误）。
在发生自定义错误的情况下，将有一个拦截器拒绝响应（如果响应具有错误支持，您可以在此处放置该命令以拒绝错误并将错误支持作为错误发送，现在您无需解构动作中的响应）。

我将为您提供一个简化的示例（我使用axios，您可以学习如何使用所使用的库进行操作）。

Vuex中的动作是异步的。因此，您无需尝试/抓住它们。

ApiService-添加用户

const addUser = () => {
    return new Promise((resolve, reject) => {
        axios
            .post(url, user)
            .then(response => resolve(response.data))
            .catch(error => reject(error));
    });
};

商店

async addUser({commit}) {
    const data = await apiService.addUser();
    commit('SET_USER', data);
    return data;
}

如果apiService.addUser中的承诺已解决，那么如果axios被拒绝，将进行提交，承诺将返回承诺，您可以在调用该操作的组件中捕获错误。

组件

async addUser() {
    this.isLoading = true;
    try {
        await this.$store.dispatch('updatePatient', this.form);    
    } catch (error) {
        // here goes the code to display the error or do x if there is an error, 
        // sometimes I store an errors array in the data of the component other times I do  x logic
    }
    this.isLoading = false;
  }

州现在，您不需要将这些错误存储在这里，状态将变得更加整洁。

state {
  users: []
}

Vuex，具有全局错误和通知处理的最佳实践

2 个答案: