76

Author: kossiecoder

db.json

@@ -98,6 +98,12 @@
       "completed": false,
       "body": "asdf",
       "id": 24
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdf",
+      "id": 25
     }
   ]
 }

src/App.vue

@@ -38,6 +38,8 @@ export default {
       triggerToast
     } = useToast();
 
+    console.log(showToast.value);
+
     return {
       toastMessage,
       toastAlertType,

src/composables/toast.js

@@ -1,9 +1,12 @@
-import { ref, onUnmounted } from 'vue';
+import { computed, onUnmounted } from 'vue';
+import { useStore } from 'vuex';
+
 export const useToast = () => {
-    const toastMessage = ref('');
-    const toastAlertType = ref('');
-    const showToast = ref(false); 
-    const timeout = ref(null);
+    const store = useStore();
+    const toastMessage = computed(() => store.state.toastMessage);
+    const toastAlertType = computed(() => store.state.toastAlertType);
+    const showToast = computed(() => store.state.showToast); 
+    const timeout = computed(() => store.state.timeout);
     const triggerToast = (message, type = 'success') => {
           toastMessage.value = message;
           toastAlertType.value = type;

src/store/index.js

@@ -2,6 +2,9 @@ import { createStore } from 'vuex';
 
 export default createStore({
     state: {
-
+        toastMessage: '',
+        toastAlertType: '',
+        showToast: false, 
+        timeout: null
     }
 });