What does pending really mean? Not sure if this is intended behavior.

[gabriel4649]

Hi!

Thanks for creating this amazing tool.

First I will present some reference code, then I will discuss an issue which might be a bug.

  computed: {
    ...mapState("podcast", {
      podcast: "podcast",
      podcastPending: state => state.pending.podcast
    }),
    ...mapState("episode", {
      episodes: "episodes",
      episodesPending: state => state.pending.episodes
    }),
    loaded: function () {
      console.log(this.podcast)
      console.log(this.podcastPending)
      console.log(!this.episodesPending && !this.podcastPending)
      return !this.episodesPending && !this.podcastPending
    },
}

It is possible to reach a state where the property podcast is null but podcastPending is false. Rendering is successful as the podcast is successfully loaded, however I'm getting errors in the console because my <div v-if="loaded"></div> guard is not working as intended, since pending is set to false before the data is actually loaded.

I'm trying to use the pending property like it is shown in the docs:

Is this a bug or does pending have another meaning other than the data is already loaded from the API?

[christianmalek]

Hi!

It is possible to reach a state where the property podcast is null but podcastPending is false.

That's intended! The property pending is only true when you fired up a request to fetch data. When it fails or when it's successful, it will be false again. If you didn't fetch any data at the beginning, it will also be false. So maybe you have to check your guard if the property is null and the according pending property is false? Hope this helps!

[gabriel4649]

Alright, thanks for the clarification.

This is a very common pattern, so it might be worth mentioning it in the docs.