Question

我目前正在尝试从Vuex商店操作对象中进行API调用时实现一项常见任务，我的操作目前看起来像这样：

＆＃13;

/**
 * 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')
  })
}

＆＃13;

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

＆＃13;

/**
 * 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')
  })
}

＆＃13;

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

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

为清楚起见;实例化的API是一个位于Axios之上的客户端层，以便我可以在关闭之前准备调用。我发现我无法直接将商店导入到客户端层或者Axios事件被触发的位置（这样我就可以将加载器可见性集中在那里）因为我在vuex模块中实例化了客户端层，因此

当我尝试这样做时创建一个循环引用，这意味着该商店将返回为undefined。

我想通过一些我尚未遇到的钩子或事件来做什么？

Answer 1

我实际上采取了不同的方式来解决这个＆＃34;问题＆＃34;在阅读了this GitHub线程和Evan You的回复之后，他谈到了解耦。

最终我决定通过强制API层直接了解商店，我将这两件事紧密地结合在一起。因此，我现在处理我在商店提交的每个组件中寻找的SHOW和HIDE功能，如下所示：

＆＃13;

/**
     * 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)
    },

＆＃13;

这里我定义了一些方法，用于在我的每个组件将扩展的Master vue组件中快捷方式提交Vuex提交。然后我在需要时调用showLoader并使用promise来确定进程何时完成并在那里调用hideLoader。

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

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

@wostex - 感谢您的回复！

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

1 个答案: