在Vuex商店中实现常见任务的最佳方式是什么？-Java 学习之路

我目前正在尝试从Vuex商店操作对象中进行API调用时完成一项常见任务，我的操作目前如下所示：

/**
 * check an account activation token
 *
 */
[CHECK_ACTIVATION_TOKEN] ({commit}, payload) {
  Api.checkActivationToken(payload.token).then((response) => {
    if (response.fails()) {
      return commit('NEW_MESSAGE', {message: responses.activation[response.code]})
    }

    return commit('SET_TOKEN')
  })
}

我有几种这样的方法可以执行各种操作 . 我希望能够做的是在进行每个API调用时出现一个加载器，并在收到响应后再次隐藏它 . 我可以这样做：

/**
 * check an account activation token
 *
 */
[CHECK_ACTIVATION_TOKEN] ({commit}, payload) {
  commit('SHOW_LOADER')
  Api.checkActivationToken(payload.token).then((response) => {
    commit('HIDE_LOADER')
    if (response.fails()) {
      return commit('NEW_MESSAGE', {message: responses.activation[response.code]})
    }

    return commit('SET_TOKEN')
  })
}

但我需要在每个API调用中重复这些SHOW_LOADER / HIDE_LOADER提交 .

我想要做的是将此功能集中在某处，以便每当进行API调用时，加载器的显示和隐藏都隐式绑定到调用，而不必每次都包含这些额外的行 .

为清楚起见;实例化的API是一个位于Axios之上的客户端层，以便我可以在关闭之前准备调用 . 我发现我不能直接将商店导入到客户端层或者Axios事件被触发的位置（这样我可以集中加载器的可见性）因为我在vuex模块中实例化客户端层因此创建了一个循环引用当我试图这样做时，意味着商店以未定义的形式返回 .

通过我尚未遇到的一些钩子或事件，我试图做什么？

1 回答

1
在阅读this GitHub线程和Evan You的回复后，我实际上采用了另一条路径"issue"，他谈到了解耦 .

最终我决定通过强制API层直接了解商店，我将这两件事紧密地结合在一起 . 因此，我现在处理在我提供商店提交的每个组件中寻找的SHOW和HIDE功能，如下所示：
```
/**
     * check the validity of the reset token
     *
     */
    checkToken () {
      if (!this.token) {
        return this.$store.commit('NEW_MESSAGE', {message: 'No activation token found. Unable to continue'})
      }

      this.showLoader()

      this.$store.dispatch('CHECK_ACTIVATION_TOKEN', {token: this.token}).then(this.hideLoader)
    },
```
在这里，我定义了一些方法，用于在我的每个组件将扩展的Master vue组件中快捷地提交Vuex提交 . 然后我在需要时调用showLoader并使用promise来确定进程何时完成并在那里调用hideLoader .

这意味着我已经从商店和API层中删除了表示逻辑，并将它们保存在逻辑上属于它们的位置 .

如果有人对此有任何更好的想法，我会全力以赴 .

@wostex - 感谢您的回复！
回复于 2024-04-25T22:20:05+08:00

在Vuex商店中实现常见任务的最佳方式是什么？

1 回答

相关问题