从另一个 vuex 操作中调用 Vuex 操作

Question

我最近迁移到Vuex 商店，并且取得了不错的进展。但我目前面临的挑战是从 Vuex 的另一个动作中调用一个动作。我还在学习Vue.js的过程中

Current versions

1. Vue 3
2. Vuex 4
3. 如果需要，我使用Electron Vue.js dev tools

/src/store/index.js - 当前代码

/* eslint-disable no-redeclare */

import { createStore } from 'vuex'
import axios from 'axios'

export default createStore({
  state: {
    ...
  },
  mutations: {
    setQuery(state, query) {
      // refers this.state.query
      state.query = query
    },

    setOnlinePresenceInitialPageLoad(state, presence) {
      // refers this.state.online & this.state.initialPageLoad
      state.online = presence
      state.initialPageLoad = false
    },

    setRequestErrorAndStatus(state, { _status, code }) {
      // refers this.state.request.error & this.state.request._status
      state.request.error = _status
      state.request._status = code
    },

    setResults(state, processed) {
      state.request.results = processed
    }
  },
  actions: {
    callApi({ commit, state, dispatch }) {
      axios.get(state.axios.targetURL, {
        baseURL: state.axios.config.baseURL,
        params: {
          days: state.axios.config.params.days,
          q: state.query,
          key: state.axios.config.params.key,
        },
      }).then(response => {
        console.log(response.status)
        commit('setOnlinePresenceInitialPageLoad', true);
        dispatch('formatResults', response.data);
      }).catch(error => {
        if (error.response) {
          console.log(error.response.status)
        } else if (error.request) {
          console.log(error.request.status)
        } else {
          console.log("Couldn't find the problem")
        }
      })
    },
    formatResults(context, payload) {
      const processedData = {
          ...
      }
      console.log(processedData);
      context.commit('setResults', processData);
    }
  },
  modules: {
  }
})

如您所见，callApi() 在 Promise 的已实现部分调用 formatResults()。

Current state (Web browser)

在代码中，我尝试注销变量processedData。我以为它会打印在控制台上。

Current state (Vue Devtools)

我也想知道为什么formatResults() 永远不会结束。

这个问题可以用异步函数解决吗，如果可以，我想知道要采取的程序吗？

感谢您的帮助

Answer 1

从提供的信息中很难判断，但我将在这里冒险猜测......

看到console.log(response.status) 然后console.log("Couldn't find the problem") 被触发，以及formatResults（来自vuex 截图）我怀疑formatResults 正在抛出错误。

formatResults(context, payload) {
  const processedData = {
      // the error could be somewhere here
  }
  console.log(processedData);
  context.commit('setResults', processData);
}

当错误发生时，catch 会处理它

if (error.response) {
  console.log(error.response.status)
} else if (error.request) {
  console.log(error.request.status)
} else {
  // handled here with log ...
  console.log("Couldn't find the problem")
}

尝试使用console.error(error)查看错误原因是什么

if (error.response) {
  console.log(error.response.status)
} else if (error.request) {
  console.log(error.request.status)
} else {
  console.error(error)
}

然后你可能有足够的信息来调试问题的根源