带有 Vuex 代码的 Vue.js 阻止了组件的第二次渲染答案

【问题标题】：Vue.js with Vuex code is blocking second rendering of component带有 Vuex 代码的 Vue.js 阻止了组件的第二次渲染
【发布时间】：2021-03-29 00:48:42
【问题描述】：

我有一个使用 VueX 的 Vue 项目。

该项目正在渲染来自 REST API 的数据，我正在使用 VueX。基本上，当创建页面时，我会在我的 VueX 商店中调用一个操作来向 API 服务器发送请求。然后在组件的模板中，我使用 getter 来显示数据。

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

我的问题是页面第一次呈现时会立即呈现（API 服务器的数据在到达时呈现除外）。然而，第二次渲染时，一些代码阻止了基础模板的渲染，并且在计算时渲染了整个页面。

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

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

第二次渲染：浏览器“冻结1.5秒，显示图表时已经有数据了。

我不能真正发布我的代码，因为它是一个大型项目。

但我的问题是，是否有任何方法可以查看哪些代码阻塞了渲染，或者是否有人可以根据这些信息猜测是什么原因造成的。

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

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

安装 Vue devtools，如果您还没有（浏览器扩展）
使用 logger 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()] : [],
});

我认为通过这两个工具，您可以更详细地了解 Vuex 商店是罪魁祸首还是其他原因。

【讨论】：