Lesson 12 - use-email-selection composable

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <h1>VMail Inbox</h1>
 
+  <h1>{{emailSelection.emails.size}} emails selected</h1>
 
   <Suspense>
     <template #default>
@@ -14,10 +15,17 @@
   
 <script>
 import MailTable from '@/components/MailTable.vue';
+import useEmailSelection from '@/composables/use-email-selection';
+
 export default {
   name: 'App',
   components: {
     MailTable
+  },
+  setup(){
+    return {
+      emailSelection: useEmailSelection()
+    }
   }
 };
 </script>

src/components/MailTable.vue

@@ -32,25 +32,14 @@
   import MailView from '@/components/MailView.vue';
   import ModalView from '@/components/ModalView.vue';
   import { reactive } from 'vue';
+  import useEmailSelection from '@/composables/use-email-selection'
 
   export default {
     async setup(){
       let {data: emails} = await axios.get('http://localhost:3000/emails')
 
-      let selected = reactive(new Set())
-      let emailSelection = {
-        emails: selected,
-        toggle(email) {
-          if(selected.has(email)) {
-            selected.delete(email)
-          } else {
-            selected.add(email)
-          }
-          console.log(selected)
-        }
-      }
       return {
-        emailSelection,
+        emailSelection: useEmailSelection(),
         format,
         emails,
         openedEmail: null

src/composables/use-email-selection.js

@@ -0,0 +1,20 @@
+import { reactive } from 'vue';
+
+let emails = reactive(new Set())
+
+export const useEmailSelection = function(){
+  let toggle = function(email) {
+    if(emails.has(email)) {
+      emails.delete(email)
+    } else {
+      emails.add(email)
+    }
+  }
+
+  return {
+    emails,
+    toggle
+  }
+}
+
+export default useEmailSelection