Vue composition api: ensure variable is not null

I ran into a problem where I was loading data from the backend in App.vue and when loaded that data would be inserted into a vuex store and in another component queried.

However the loading took longer than expected and a data race happened. The route destination rendered faster than the backend could deliver data and it to be stored in the vuex store and returned.

Concretely I loaded a profile of the logged in user with vuex-orm and the axios plugin.
In order to grab the profile data I used

I wanted to update location data of that profile if it was different, which was done with a promise, because that’s how the cordova api works.
But profile was always null. And I tried ref() and reactive() but finally solved it with watch().

So whenever profile changes the location is updated. Of course I have checks to not update if it’s not required.

The initial state of profile is null, then it changes and updateProfile is called with the new value.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.