[Vuejs]-Page reload causes Vuex getter to return undefined

I read the complete issue in the website you mentioned. It’s a generic case.

Say, for cat details page url: www.timmyskittys.com/stage2/:id.

Now in Per-Route Guard beforeEnter() you can set the cat-id in store. Then from your component call the api using the cat-id (read from getters)

I found the solution to my issue:

I had to move the call of the action which calls the mutation that loads the .json file (dbdata.json) into a computed() within App.vue. This was originally done in Stage1.vue.

Thanks all for responding.

I had the same issue and my "fix" if it can be called that was to make a timer, so to give the store time to get things right, like so:

<v-treeview
    :items="items"
    :load-children="setChildren"
  />
</template>

<script>
import { mapGetters } from 'vuex'

const pause = ms => new Promise(resolve => setTimeout(resolve, ms))

export default {
  data () {
    return {
      children: []
    }
  },
  computed: {
    ...mapGetters('app', ['services']),
    items () {
      return [{
        id: 0,
        name: 'Services',
        children: this.children
      }]
    }
  },
  methods: {
    async setChildren () {
      await pause(1000)

      this.children.push(...this.services)
    }
  }
}
</script>

Even though this is far from ideal, it works.