带有Vuex代码的Vue.js正在阻止组件的第二次呈现

我与VueX有一个Vue项目

该项目正在呈现来自RESTAPI的数据，我正在使用VueX进行此操作。 基本上，在创建页面时，我会在VueX存储中调用一个操作来向API服务器发送请求。 然后在组件的模板中，我使用getter来显示数据

我将API中的数据保存在存储中。因此，下一次您尝试呈现同一页面并发送操作调用以从API服务器获取时，它将不会执行任何操作，因为它已保存

我的问题是，第一次呈现页面时，它会立即呈现（来自API服务器的数据除外，该数据在页面到达时呈现）。 但是，第二次呈现时，一些代码会阻止基本模板的呈现，并且在计算时呈现整个页面

例如，我在组件中有一个图表，其作用如下：

第一次渲染：该图表立即显示但没有数据，3秒后显示图表中的数据

第二次渲染：浏览器“冻结1.5秒，显示图表时已包含数据

我不能发布我的代码，因为这是一个大项目

---

但我的问题是，是否有任何方法可以查看哪些代码阻止渲染，或者是否有人可以从这些信息中猜测是什么导致了渲染。

有一些工具可以帮助您调试Vue/Vuex应用程序

• 如果尚未安装Vue devtools，请安装（浏览器扩展）
• 使用记录器Vuex产品

我认为通过这两个工具，您可以获得更多关于Vuex商店是罪魁祸首还是其他原因的详细信息

• Vuex记录器：

// add Vuex logger to non-production builds
import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex);

const shouldDebug = process.env.NODE_ENV !== 'production';

const state = () => ({})

const mutations = {}

const actions = {}

const getters = {}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  strict: shouldDebug,
  plugins: shouldDebug ? [createLogger()] : [],
});