Vue-devtools: Devtools will execute all getters of vuex at the first time in Centos.

[SidKwok]

vue-devtools will execute all getters of vuex at the first time in Centos (Maybe all Linux). This error only comes out when your code is running on Linux, Darwin is fine.

Reproduce:

1. vue init webpack vue-demo
2. install vuex and all deps.
3. use these code in App.vue:

...
<script>
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
      test: 0
    },
    getters: {
      getTest: state => {
        alert('error');
        return state.test
      }
    }
});

export default {
  name: 'app',
  store
}
</script>
...

1. check it in browsers with vue-devtools (make sure you have already ran it in browser)

2. The alert will execute.

My os info:

LSB Version:    :core-3.0-amd64:core-3.0-ia32:core-3.0-noarch:graphics-3.0-amd64:graphics-3.0-ia32:graphics-3.0-noarch
Distributor ID: CentOS
Description:    CentOS release 4.3 (Final)
Release:        4.3
Codename:       Final

Vuex: 3.0.0
Vue: 2.5.2
vue-devtool: 3.1.6
node: 6.9.1
npm: 5.5.1
chrome: 61.0.3163.100
firefox: 56.0

If vue-devtools is not installed, everything is just fine. So I think it should be a bug of vue-devtools. And vuex 1.0.0-rc3 doesn't seem to have such issue. But I did't fully test it.

Let me know if you need more info.

[posva]

We need to compute the getters in order to display them in the vuex panel, it's not an error

[yehosef]

Perhaps this could be done lazily. Eg, show a (...) like many of the properties do. The problem is that it's confusing to a dev if a getter is being called through a valid flow or this tool. I have a getter that's heavier (has to do filtering/mapping) and I spent a lot of time trying to figure out why this was getting called in a flow that it shouldn't have.

If this was possible to do this lazily I think it would be preferable.

[peterchealse]

it causes errors , if state.a.b....

[yehosef]

@peterchealse I don't understand - doing it lazily causes errors? If there is something that ask for state.a.b and that would call a getter, then the getter would be called from the normal flow.

Here's my case: I have a list of 500 ids for posts and I fetch the posts lazily when the they are referenced by the view. But there is also an option to filter the posts - but that requires me to fetch all the posts and filter on the content, not just the ids. I call a different getter in that case (because it's a lot more work.) So when the vue tools call all the getters, it forces that extra work which make the initial page slower and make the transition to filtered view faster because I've already done the work.

In my case it's more of an annoyance - but I imagine there could be a case where it could cause more significant confusion or problems.

[yehosef]

In my case (and this might help other people) I could move the other getters into outside functions and they will only be called when the actual flow requires it.

But still, it seems better to do this lazily, or at least have an option.

[peterchealse]

@yehosef sorry, i'm not replying your anwser..... the devtools version 3.1.6 sometimes causes the page crashes because it calculate the getters synchronously..

[Blfrg]

@posva

First off, thank you and the other devs for this extremely useful tool!
But I think there still needs to be some consideration about the issue described here.

I started using VueJS a couple month's ago and naturally vue-devtools with it.
I kept having an intermittent issue on page refresh where some getter-based selections would return empty on page load.
vue-devtools showed the proper data stored in Vuex but attempts to read the getter results would not return the proper result until the result was changed (ie: click a different selection).
The getter seemed to no longer be reactive, or using stale results, even if invoked from a different component to test.

I would give up troubleshooting and make progress elsewhere, but kept returning when I encountered the [intermittent] issue again.
It didn't make any sense until I found the issue being reported here.
I arrived here because I noticed all the getters fired well before the main component was created()

Now I can confirm at least that closing dev tools, or switching to a different dev tab (console/network) then performing a [hard|soft] refresh I will receive the expected results from the getters on page load.

Since a developer is likely to keep vue-devtools visible or activated at least once during their session
this issue can arise frequently if they're testing something related to page load or initial component creation.

I understand the need to parse everything as early as possible, but I also agree a bit of laziness would be preferred so as to avoid disrupting standard flow or [time sensitive -- created(), mounted()] expectations.
If I load a page first, then open dev console, and switch to the vue-devtools tab, it still functions as expected.
This suggests to me that vue-devtools can still work properly even if the page is fully rendered before it begins to parse details for itself.

If a solution ultimately can't be found, at the very least it's worth a mention in the Common problems and how to fix section of the readme.
Something to the effect of:

#### Getters return empty on page load
1. Close dev console (or switch to a native console tab)
2. Refresh the page
3. Open dev console and vue-devtools again.
*Note: a hard refresh may be required*

Devs may still struggle to determine where the root issue lies, but the mention above may help them locate the fix sooner.

Thank you for this utility and your consideration!

[tcamde]

Oh! I just spend 2 hours wondering what the hell was calling a getter...

[Vercoutere]

@tcamde Me too. This is a really annoying side effect. I have some getters that depend on state that is not available yet in my login component.

[522122]

I have same issue as @Vercoutere.
Simple example, warehouse gets loaded dynamically, and it can even return no data ... but dev tools is executing this getter and showing error in consolle and is stuck at loading state ...
selectedPrice: (state) => { return state.warehouse[state.selectedItem].price },

[jedikcz]

Same problem here. This is really annoying and breaks quite basic examples for vuex use.

Why can't be getters evaluated on Vue/Vuex panel e.g. after I click them?

[gterras]

Could this issue be reopened ? The simple act of installing the extension can trigger errors that would never exist otherwise, this is very confusing and can lead to wasted time. I understand it is not an easy fix but maybe just adding a console message would make thing more clear?

[joffff]

Could this issue be reopened ? The simple act of installing the extension can trigger errors that would never exist otherwise, this is very confusing and can lead to wasted time. I understand it is not an easy fix but maybe just adding a console message would make thing more clear?

+1 for this. vue-devtools are invaluable but I would have loved a heads-up or console message even if just to make me aware that errors might happen. Now I'm better informed (and will hopefully remember to look out for the errors) it's not such an issue but it will hopefully reduce stress for developers new to Vue.

[gterras]

Thanks a lot for reopening this ticket. Since the problem seems to be related to getters I'd like to ask : does anyone have an extensive or critical use of the getters parts in the dev tools ? From my experience it is always WAY less important than having a reliable access to the state, since you can deduce the value of your getters from it, and many getters in a Vuex project take arguments anyway (making them unavailable in the dev tools by nature.)

Problem is these getters errors also almost always trigger a state display malfunction, making the dev tools unusable. Would it be possible to make getters management a plugin ?

[Akryum]

As a side-note, I've never ever written a single getter that takes parameters 😸

[Akryum]

The new Vuex backend only execute getters when a snapshot is being loaded to the devtools. Also I added some logic to wrap getters in try...catch automatically when they are being serialized by the devtools.

[Akryum]

See this commit: https://github.com/vuejs/vue-devtools/commit/190544578bfe692c577bae91779ecc686f1cc402

[nolros]

@Akryum @Blfrg first thank you for the lib. It has been a godsend. Sidenote, the bug still exists, I literally spent an entire day rewriting my vueFactory because of this bug, which by the way still exists Vuex "^3.3.0". Almost impossible to debug as I attempted everything from cloning each model or a new instance or make some sort of provider class. FWIW, the bug still exists in that when you make a commit it will execute all the getters.

[erguotou520]

@nolros Just enable the New Vuex background in vue devtools setting panel.