javascript - Vuex(或者可能只是 JS)在 Actions 和 context/commit 中链接 promise

Question

我们很难弄清楚如何使用转译的 ES6 代码在链式 Promise 中处理上下文(或者具体来说是 { commit })。下面是一个登录操作的示例，该操作先进行身份验证，然后订阅使用 RxJS 作为流向用户提供。我们需要在整个过程中提交多个变更，但不断收到 commit is not a function 错误。

有谁知道或有这样的例子，或者任何人都可以提供关于在这种情况下在何处以及如何处理上下文/提交的任何基本准则 - 例如什么时候可以使用 ES6，什么时候可以不使用，和/或上下文在哪里提升(如果有的话)，或者是否有一种更简单的方法来解决所有这些问题，比如将所有东西都包装在一个主 promise 中？由于我们需要在 promise 链中的每个步骤进行潜在的提交，因此我们无法看到其中的一些如何工作:

const actions = {
  login ({commit}, creds) { // need to commit here
    commit('toggleLoading')
    api.authenticate({
      strategy: 'local',
      ...creds
    })
    .then(function (result) {
      return api.passport.verifyJWT(result.accessToken)
    })
    .then(function ({commit}, payload) {  //need to commit here
      console.log(commit)
      return api.service('users').get(payload.userId)
      .subscribe(commit('setUser', user)) // need to commit here - but commit is not a function error
    })
    .catch(function ({commit}, error) {
      commit('setErr', `ERROR AUTHENTICATING: {$err.message}`) // need to commit here but commit is not a function error
      commit('toggleLoading')
    })
  }

我们发现的所有示例都非常简单，每个操作仅显示一次提交(或者可能包含在 if 中的 2 次提交)。如有任何帮助或反馈，我们将不胜感激!

Answer 1

首先，.then 和 .catch 中的回调函数采用单个参数，您已经编码了两个...但是，commit 来自 login 参数仍在范围内，因此修复起来非常简单

您的代码可以简化如下

const actions = {
    login ({commit}, creds) {
        commit('toggleLoading');
        api.authenticate({strategy: 'local', ...creds})
        .then(result => api.passport.verifyJWT(result.accessToken))
        .then(payload => api.service('users').get(payload.userId).subscribe(commit('setUser', user)))
        .catch(function (error) {
            commit('setErr', `ERROR AUTHENTICATING: ${error.message}`);
            commit('toggleLoading');
        });
    }

注意:您在 .catch 中有 {$err.message}，而我相信应该是 ${error.message} >