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
|
1 |
const profile = computed(() => store.$db().model('profile').query().where('subject_id', sub).first()) |
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().
|
1 2 3 4 5 6 |
const profile = computed(() => store.$db().model('profile').query().where('subject_id', sub).first()) watch(profile, (cur) => { if (typeof cur === "object") { updateProfile(cur) } }) |
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.