Given the following functioning vuex action named init
that fetches a settings
and an accounts
collection:
actions: {
init: firestoreAction(({ bindFirestoreRef, commit }, payload) => {
bindFirestoreRef(
'settings', fb.settings.doc(payload),
)
.then(() => commit('SETTINGS_READY', true))
.catch((err) => {
commit('SNACKBAR_TEXT', err.message);
Sentry.captureException(err);
});
bindFirestoreRef(
'accounts', fb.accounts.where('program', '==', payload),
)
.then(() => commit('ACCOUNTS_READY', true))
.catch((err) => {
commit('SNACKBAR_TEXT', err.message);
Sentry.captureException(err);
});
}),
},
I have two questions:
- The code appears to run synchronously, but I want the two collections to be fetched asynchronously to maximize performance. How can that be achieved?
- Is it possible to refactor this code to be more concise and yet provide for the independent (and synchronous)
then/catch
functionality present in the example?
You can use
async
/await
function then call thebindFirestoreRef
insidePromise
constructor.