Vue-devtools: Not calling vuex Getters when no needed

Created on 12 Dec 2018  路  3Comments  路  Source: vuejs/vue-devtools

What problem does this feature solve?

A SPA website can have different store modules with specific getters for each screen, which can be associated with ajax requests.
Executing all the getters automatically will not only execute all the associated requests, but also can create inconsistencies or very different behaviour.

What does the proposed API look like?

Maybe getters could be collapsed and disabled by default, and call them all only on expand. Allowing to use the rest of tools normally.

discussion

Most helpful comment

So I have this issue with one of my app where evaluating getters on vuex:init is throwing errors and breaks everything. I am using vuex-router-sync and one the getters is written as such :

export const stationId = (state, getters, rootState, rootGetters) => {
  return rootState.route.params.stationId
}

This getter is not meant to be evaluated on init and since vuex-router-sync add the route state module asynchronously it fails.
This is an easy fix :

export const stationId = (state, getters, rootState, rootGetters) => {
  return rootState.route && rootState.route.params.stationId
}

But it feels bad to modify the codebase just for using the devtool.

All 3 comments

Are you implying that you are making ajax calls in getters? :scream_cat:

Are you implying that you are making ajax calls in getters?

A handler function requests ajax once

So I have this issue with one of my app where evaluating getters on vuex:init is throwing errors and breaks everything. I am using vuex-router-sync and one the getters is written as such :

export const stationId = (state, getters, rootState, rootGetters) => {
  return rootState.route.params.stationId
}

This getter is not meant to be evaluated on init and since vuex-router-sync add the route state module asynchronously it fails.
This is an easy fix :

export const stationId = (state, getters, rootState, rootGetters) => {
  return rootState.route && rootState.route.params.stationId
}

But it feels bad to modify the codebase just for using the devtool.

Was this page helpful?
0 / 5 - 0 ratings