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

Question

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

Current versions

Vue 3
Vuex 4
如果需要我使用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 的 fulfilled 部分调用了 formatResults()。

Current state (Web browser)

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

Current state (Vue Devtools)

我也想知道为什么formatResults()永无止境

这个问题可以用async functions解决吗，如果可以的话我想知道要采取什么程序？

感谢您的帮助

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)
}

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

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

Calling Vuex action from within another vuex action

javascript

vue.js

vuejs3

vuex4

vue-devtools