78

Author: kossiecoder

db.json

@@ -116,6 +116,30 @@
       "completed": false,
       "body": "df",
       "id": 27
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdf",
+      "id": 28
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdfasdf",
+      "id": 29
+    },
+    {
+      "subject": "e",
+      "completed": false,
+      "body": "f",
+      "id": 30
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdfasdf",
+      "id": 31
     }
   ]
 }

src/composables/toast.js

@@ -1,26 +1,16 @@
-import { computed, onUnmounted } from 'vue';
+import { computed } from 'vue';
 import { useStore } from 'vuex';
 
 export const useToast = () => {
     const store = useStore();
-    const toastMessage = computed(() => store.state.toastMessage);
+    const toastMessage = computed(() => store.getters.toastMessageWithSmile);
     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;
-          showToast.value = true;
-          timeout.value = setTimeout(() => {
-            toastMessage.value = '';
-            toastAlertType.value = '';
-            showToast.value = false;
-          }, 5000)
-        }
+        store.dispatch('triggerToast', message, type);
+    }
 
-    onUnmounted(() => {
-        clearTimeout(timeout.value);
-    })
     return {
         toastMessage,
         toastAlertType,

src/store/index.js

@@ -5,7 +5,6 @@ export default createStore({
         toastMessage: '',
         toastAlertType: '',
         showToast: false, 
-        timeout: null
     },
     mutations: {
         UPDATE_TOAST_MESSAGE (state, payload) {
@@ -16,30 +15,24 @@ export default createStore({
         },
         UPDATE_TOAST_STATUS (state, payload) {
             state.showToast = payload;
-        },
-        UPDATE_TOAST_TIMEOUT (state, payload) {
-            state.timeout = payload;
         }
     },
     actions: {
         triggerToast({ commit }, message, type = 'success') {
-            // toastMessage.value = message;
             commit('UPDATE_TOAST_MESSAGE', message)
-            // toastAlertType.value = type;
             commit('UPDATE_TOAST_ALERT_TYPE', type)
-            // showToast.value = true;
             commit('UPDATE_TOAST_STATUS', true)
 
-            const timeout = setTimeout(() => {
-            //   toastMessage.value = '';
+            setTimeout(() => {
               commit('UPDATE_TOAST_MESSAGE', '')
-            //   toastAlertType.value = '';
               commit('UPDATE_TOAST_ALERT_TYPE', '')
-            //   showToast.value = false;
               commit('UPDATE_TOAST_STATUS', false)
             }, 5000)
-
-            commit('UPDATE_TOAST_TIMEOUT', timeout);
           }
+    },
+    getters: {
+        toastMessageWithSmile (state) {
+            return state.toastMessage + '^_^';
+        }
     }
 });