Vue.js with Vuex code is blocking second rendering of component

Question

I have a Vue project with VueX.

The project is rendering data from an REST API, which I'm using VueX for. Basically when the page is created I call an action in my VueX store to send a request to the API server. Then in the template of the component I use a getter to display the data.

I save the data from the API in the store. So the nexted time you try to render the same page and send the action call to fetch from the API server It will do nothing since it's been saved.

My problem is that the first time the page is rendered it is rendered immediately (except for the data from the API server which is rendered when it arrives). However the second time it's rendered some code is blocking the base template from rendering and the whole page is rendered when it's been calculated.

For exemple I have a chart in the component which acts like this:

First render: the that chart displays but without data instantly, 3 seconds later the data inside the chart is showing.

Second render: the browser "freezes for 1.5 seconds and when the chart is displayed is has data already.

I can't really post my code since it's a large project.

But my question is if there's any way to see which code is blocking rendering or if someone from this information could have a guess as to what is causing it.

muka.gergely · Accepted Answer · 2020-12-19 11:00:34Z

1

There are tools that can help you debug your Vue/Vuex application.

install Vue devtools, if you haven't already (browser extension)
use the logger Vuex offers

// 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()] : [],
});

I think with these two tools you could get more granular information on whether the Vuex store is the culprit or there's something else going on.

answered Dec 19, 2020 at 11:00

muka.gergely

8,3593 gold badges20 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js with Vuex code is blocking second rendering of component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related