Remarque :
Le dernier exercice permet de gérer les cas où l'utilisateur tape un numéro de compte bancaire incorrect. Cependant, on remarque que le résultat n'est pas tout à fait satisfaisant. Par exemple, si on tape un numéro valide, on obtient des informations bancaires. Si ensuite, on tape un numéro dont le format n'est pas bon, l'affichage des informations reste à l'écran. Encore pire, si on tape un nouveau numéro valide (mais pas le premier), et que l'on demande le montant disponible, les transactions du premier compte apparaissent.
Tous ces problèmes viennent du fait que l'on stocke les informations dans le store et qu'elles y reste jusqu'à ce que l'utilisateurs demande le montant disponible ET les transactions pour un compte valide. Pour régler les problèmes mentionnés, il faudrait donc pouvoir réinitialiser ces informations dans le store dès que l'on tape un numéro, qu'il soit valide ou pas. Cela peut se faire en :
- ajoutant une mutation reset() dans le store qui vide les informations bancaires
- modifiant le template de BankAccountView, afin d'appeler cette mutation dès que l'on tape quelque chose dans le champ de saisie. Cela veut dire qu'il ne faut plus utiliser v-model mais plutôt @input pour détecter un changement dans le champ de saisie.
Une archive contenant les fichiers est téléchargeable [ ici ]
IMPORTANT : l'archive ne contient que le répertoire src avec les fichiers sources. Pour tester cette solution, vous devez donc créer un projet incluant vue-router, vuex, comme indiqué dans le début du TP.