Related summaries to Vue.js
How to use Vue with Django (including Auth) 🔒
Cette vidéo présente la création d'une application full-stack en utilisant Django comme backend et Vue.js comme frontend. L'objectif est de créer les fondations d'une application complète prête pour la production. Tout d'abord, le processus d'installation et de configuration de Django est détaillé. Cela inclut l'installation de Django et de Django CORS Headers, la création d'un projet Django appelé "core" et d'une application "Sim", ainsi que la configuration des URL, des middlewares et des paramètres CORS. Ensuite, la création des vues Django est expliquée. Il y a des vues pour obtenir le jeton CSRF, se connecter, se déconnecter et enregistrer un utilisateur. Un formulaire Django est également créé pour l'enregistrement d'utilisateur. La configuration du frontend Vue.js est ensuite abordée. Cela inclut l'installation de Vue Router et de Pinia (la bibliothèque de gestion d'état de Vue). Les composants de pages (Home, Login, Register) sont créés et le store Pinia est mis en place pour gérer l'état d'authentification de l'utilisateur. Enfin, la vidéo montre comment faire fonctionner l'application en local, en démarrant le serveur Django et le serveur de développement Vue.js. Elle explique également comment les sessions et les cookies sont gérés entre le frontend et le backend. Le résumé couvre les principales étapes de la mise en place de cette application full-stack, en mettant l'accent sur l'intégration entre le frontend Vue.js et le backend Django.
Vue.jsDjangoFull-stack
You are using useFetch WRONG! (I hope you don't)
Cette vidéo traite de l'utilisation correcte de la fonction Fetch dans un contexte Vue.js. L'auteur commence par montrer un exemple d'application avec un formulaire de connexion qui utilise la fonction Fetch de manière incorrecte. Cela entraîne de nombreux appels inutiles à l'API de connexion, à chaque fois que l'utilisateur tape quelque chose dans le formulaire. L'auteur explique que le problème vient du fait qu'il utilise la fonction composable `useFetch` à l'intérieur d'un gestionnaire d'événements, alors qu'elle devrait être utilisée uniquement dans le bloc `setup()` ou `script setup`. En effet, `useFetch` crée une instance réactive qui surveille les données passées en paramètre, ce qui entraîne des appels multiples lors de la modification de ces données. La solution proposée est d'utiliser plutôt la fonction `$fetch` de manière directe, sans passer par un composable. Cela permet d'éviter les problèmes de réactivité et de ne faire qu'un seul appel à l'API lors de la soumission du formulaire. L'auteur mentionne également une autre approche possible, qui consiste à utiliser `useFetch` de manière contrôlée. Dans ce cas, on extrait la logique d'appel à l'API du gestionnaire d'événements, on la place dans une fonction `execute()` indépendante, et on désactive la réactivité des paramètres passés à `useFetch`. Cela permet de conserver les avantages de `useFetch` tout en évitant les problèmes de réactivité. En résumé, la vidéo met en garde contre l'utilisation incorrecte de `useFetch` et propose deux solutions alternatives pour gérer les appels à l'API de manière plus adaptée dans un contexte Vue.js.
Vue.jsFetch APIReactive data