Am următoarea problemă:
Vreau să interceptez un action din Pinia înainte să se întâmple și să pun utilizatorul să confirme respectiva acțiune. În funcție de răspuns, vreau să se întâmple … ceva.
Momentan am rezolvat folosind codul de mai jos DAR mi se pare un pic hacky să am throw
acolo, pentru că nu e eroare per se, este un alt branch de execuție
Codul ăsta este în componenta principală (App.vue
):
store.$onAction(({name, store, args}) => {
if (!store.isDirty) {
return;
}
if (name === 'setCurrentItem') {
if (!confirm('Discard?')) {
throw new Error('User aborted');
}
}
});
O altă abordare ar fi să pun logica asta în componenta care cheamă setCurrentItem
, dar este folosit în mai multe componente, deci ar însemna să repet logică în cel puțin trei locuri (momentan).
Încă o alternativă ar fi să pun confirmarea asta direct în store, dar nu cred că are ce să caute un element de UI (confirm
) în data layer. În plus, i18n
nu funcționează în afara componentelor, deci varianta asta este exclusă.
Documentația de la Pinia zice Intercept actions and its results
dar este cam tot ce se menționează, nu am reușit să găsesc niciun exemplu în care poți să alterezi/anulezi rezultatul unei acțiuni.
Sugestii?
În store am așa:
// store
const myStore = defineStore({
state() {
return {isDirty: false, currentItem: null };
},
actions: {
setCurrentItem(item) {
this.currentItem = item;
},
}
});
În componente îl apeleze așa:
const store = myStore();
const {setCurrentItem} = store;
<template>
<button @click=setCurrentItem(1)>x</button>
</template>