[Vuejs]-Vuex store value not set in mounted

Usually the mounted hook of child component is called before the mounted of parent component.

From Vue Parent and Child lifecycle hooks

If you try to console.log on both mounted hook you will see the order of execution (but I’m still not sure why your store.getters.getHostUrl is set).

So you need a watcher to run your code after your store has value.

Example code:

...
  computed: { // or use another getters
    url () {
      if (!store.getters.getHostUrl || !store.getters.getApiKey) return
      return `${store.getters.getHostUrl}/api/${store.getters.getApiKey}/countryCodes`
    }
  },
  watch: {
    url (value) {
      ...
    }
  }
...

CodeSandbox

So…. there were two ways of solving this….. thank you to both comments.

1. Switch my mounted in the main.js to created- the diagram above explains why… as well as the nice article.

2. add "await store.getters.getApiKey"