Global non-persisted state with useEmailSelection composition function

Author: Jeffrey Biles

src/components/BulkActionBar.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    {{emailSelection.emails.size}}
+  </div>
+</template>
+
+<script>
+  import { useEmailSelection } from '../composition/useEmailSelection';
+
+  export default {
+    setup(){
+      let { emailSelection } = useEmailSelection();
+      
+      return { emailSelection }
+    }    
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/MailTable.vue

@@ -1,6 +1,7 @@
 <template>
   <table class="mail-table">
-    {{emailSelection.emails.size}}
+    <BulkActionBar />
+
     <tbody>
       <tr v-for="email in unarchivedEmails" 
           :key="email.id"
@@ -33,25 +34,16 @@
   import axios from 'axios';
   import MailView from '@/components/MailView.vue';
   import ModalView from '@/components/ModalView.vue';
-  import { reactive } from 'vue';
+  import BulkActionBar from '@/components/BulkActionBar.vue';
+  import { useEmailSelection } from '../composition/useEmailSelection';
 
   export default {
     async setup(){
       let response = await axios.get('http://localhost:3000/emails');
       let emails = response.data;
       let openedEmail = null;
 
-
-      let emailSelection = reactive({
-        emails: new Set(),
-        toggle(id) {
-          if(this.emails.has(id)) {
-            this.emails.delete(id)
-          } else {
-            this.emails.add(id);
-          }
-        },
-      })
+      let { emailSelection } = useEmailSelection();
 
       return {
         format,
@@ -62,7 +54,8 @@
     },
     components: {
       MailView,
-      ModalView
+      ModalView,
+      BulkActionBar
     },
     computed: {
       unarchivedEmails(){

src/composition/useEmailSelection.js

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