Organize your Composition API code (2k subscriber special)

Organize your Composition API code (2k subscriber special)

32.109 Lượt nghe
Organize your Composition API code (2k subscriber special)
✨ The Composition API is amazing - but organizing code is still a challenge sometimes, especially for all the people that were (or are) used to the Options API. In this video I point out common mistakes when organizing code and an easy way to avoid spaghetti code in Vue components with a bit more functionality Key points: ✔ Building a Demo Application showing issues when organizing code 🎉 A dead-simple pattern to organize CAPI code in Vue Components 🕶 Examples from Evan himself --- Links: 🔗 Demo App Code https://play.vuejs.org/#eNq1VVtvmzAU/iunvIRIKZk07aWj1S6qtE3qNqXR9sILIwbcGhvZJsmU5b/v2NhAaJJWkyblYuzvfOfqj13wvq6jdUOCqyBWmaS1BkV0UwNLeXGdBFolwU3CaVULqWEHkuQzyERVN5qsZrBJdVbOQP+uCSzMkRb4B3vIpahggsSThCd8Poc7olRakEtJWIqmoHST5wnPBFcahKQF5SlzILg2fsLJJ8KYgJ9CstXFZOrBO3RSFIwsyJpIRWZQOas92jWKOJJwRIr2NpAl2epLVYoNB11SXijPS9W93W2d5ylTxsafLVK+EpUxPoaydQgdwwxCTjY/UtaQKVzfwC7h8JQhWhsA8lgOC8khvOgtrRmgG91IDB1g70F3qS4jaenCKcTwKnpzEn7SrZYNet3bsuQNzzQVfFg+yrHHV6arsdISC3UDf7BrZuWcneqdnYHWHtk9TrbtWvU4P0YhJoFlGhG1gUaqZlSHk8k0cgThNHoQlJutATvm6fhHnQHokjsYG/TpKtabdrW5GO919Wy9+Yl7koOnxCaNKTp/vkfjivSenK8OeLQyNiTbvQ7nHBxej3bPRezywE88b687Xm580KSqzb3EJ4DYtg7Wl5VYEYYiMPKfBDBvgb8arbGw7zJGs0cE9lcIK2iXqB5LG048b8HHDQ9CRhu3OjRa0TUGRfPekdUmk95u16uArV08R/QRs9Ft6AiWJVVQpgpSyMqUZwTe2uHxPPF8UKJghrqIk5DTInpQgqN42tIngRkHyoj8VpuJQ+288k1JghTFbPPF7pm75xqDNiXJHo/sP6it2UuC75IoItdYl+5Mp7Iguj2+vf+K6QwOsW0NQ/SZwwVRgjUmxhb2oeErDHuAs9F+trKPN36pbreacOWTasUDZ8nikwCF/uOZ1PtwX0ev/QxiFXu5ibTCKp56zZx9v0icYPySrbX9BylD4xeK2QD5X+RswH9K0CzkjKTZ8xeKmsXuh17PCJsnPiFt7vgZcXMo5/MZgWvDsym3607mnPVI6Nyul7o+O/sT7P8C+boUAg== 🔗 VueUse useToggle https://vueuse.org/shared/usetoggle/ 🔗 Evan's gist https://gist.github.com/yyx990803/8854f8f6a97631576c14b63c8acd8f2e 📺️ Is your function actually a composable https://www.youtube.com/watch?v=N0QrFKBZuqA Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up! 🌐 Connect further: Website: https://www.lichter.io Twitter/X: https://twitter.com/TheAlexLichter Twitch: https://www.twitch.tv/TheAlexLichter Chapters: 00:00 Intro + Options vs Composition API 01:47 Demo App and Tasks 02:30 Building the feature "with Options API in mind" 05:44 Common mistake: Grouping by options 07:55 Why this is a problem 08:15 Refactoring & Reorganizing 09:26 Are we done? 10:09 Creating a composable for message-related things 13:36 The "secret sauce" - in-line composables 15:55 Learning from the master himself 17:25 Summary