79

Author: kossiecoder

db.json

@@ -140,6 +140,30 @@
       "completed": false,
       "body": "asdfasdf",
       "id": 31
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdf",
+      "id": 32
+    },
+    {
+      "subject": "asdf",
+      "completed": false,
+      "body": "asdf",
+      "id": 33
+    },
+    {
+      "subject": "adsf",
+      "completed": false,
+      "body": "asdf",
+      "id": 34
+    },
+    {
+      "subject": "adsf",
+      "completed": false,
+      "body": "asdf",
+      "id": 35
     }
   ]
 }

src/App.vue

@@ -15,11 +15,13 @@
   <div class="container">
       <router-view/>
   </div>
-  <Toast 
-    v-if="showToast" 
-    :message="toastMessage"
-    :type="toastAlertType"
-  />
+  <transition name="slide">
+    <Toast 
+      v-if="showToast" 
+      :message="toastMessage"
+      :type="toastAlertType"
+    />
+  </transition>
 </template>
 
 <script>
@@ -50,5 +52,21 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+.slide-enter-active,
+  .slide-leave-active {
+    transition: all 0.5s ease;
+  }
+
+  .slide-enter-from,
+  .slide-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+
+  .slide-enter-to,
+  .slide-leave-from {
+    opacity: 1;
+    transform: translateY(0px);
+  }
 </style>

src/components/TodoForm.vue

@@ -51,27 +51,18 @@
       Cancel
     </button>
   </form>
-  <transition name="fade">
-    <Toast 
-      v-if="showToast" 
-      :message="toastMessage"
-      :type="toastAlertType"
-    />
-  </transition>
 </template>
 
 <script>
 import { useRoute, useRouter } from 'vue-router';
 import axios from '@/axios';
 import { ref, computed } from 'vue';
 import _ from 'lodash';
-import Toast from '@/components/Toast.vue';
 import { useToast } from '@/composables/toast';
 import Input from '@/components/Input.vue';
 
 export default {
   components: {
-    Toast,
     Input
   },
   props: {

src/composables/toast.js

@@ -3,12 +3,12 @@ import { useStore } from 'vuex';
 
 export const useToast = () => {
     const store = useStore();
-    const toastMessage = computed(() => store.getters.toastMessageWithSmile);
-    const toastAlertType = computed(() => store.state.toastAlertType);
-    const showToast = computed(() => store.state.showToast); 
+    const toastMessage = computed(() => store.getters['toast/toastMessageWithSmile']);
+    const toastAlertType = computed(() => store.state.toast.toastAlertType);
+    const showToast = computed(() => store.state.toast.showToast); 
 
     const triggerToast = (message, type = 'success') => {
-        store.dispatch('triggerToast', message, type);
+        store.dispatch('toast/triggerToast', message, type);
     }
 
     return {

src/pages/todos/index.vue

@@ -49,25 +49,18 @@
       </ul>
     </nav>
   </div>
-  <Toast 
-    v-if="showToast" 
-    :message="toastMessage"
-    :type="toastAlertType"
-  />
 </template>
 
 <script>
 import { ref, computed, watch } from 'vue';
 import TodoList from '@/components/TodoList.vue';
 import axios from '@/axios';
-import Toast from '@/components/Toast.vue';
 import { useToast } from '@/composables/toast';
 import {useRouter} from 'vue-router';
 
 export default {
   components: {
     TodoList,
-    Toast,
   },
   setup() {
     const router = useRouter();

src/store/index.js

@@ -1,38 +1,6 @@
 import { createStore } from 'vuex';
+import modules from './modules';
 
 export default createStore({
-    state: {
-        toastMessage: '',
-        toastAlertType: '',
-        showToast: false, 
-    },
-    mutations: {
-        UPDATE_TOAST_MESSAGE (state, payload) {
-            state.toastMessage = payload;
-        },
-        UPDATE_TOAST_ALERT_TYPE (state, payload) {
-            state.toastAlertType = payload;
-        },
-        UPDATE_TOAST_STATUS (state, payload) {
-            state.showToast = payload;
-        }
-    },
-    actions: {
-        triggerToast({ commit }, message, type = 'success') {
-            commit('UPDATE_TOAST_MESSAGE', message)
-            commit('UPDATE_TOAST_ALERT_TYPE', type)
-            commit('UPDATE_TOAST_STATUS', true)
-
-            setTimeout(() => {
-              commit('UPDATE_TOAST_MESSAGE', '')
-              commit('UPDATE_TOAST_ALERT_TYPE', '')
-              commit('UPDATE_TOAST_STATUS', false)
-            }, 5000)
-          }
-    },
-    getters: {
-        toastMessageWithSmile (state) {
-            return state.toastMessage + '^_^';
-        }
-    }
+    modules
 });

src/store/modules/index.js

@@ -0,0 +1,5 @@
+import toast from './toast';
+
+export default {
+    toast
+}

src/store/modules/toast/index.js

@@ -0,0 +1,37 @@
+export default {
+    namespaced: true,
+    state: {
+        toastMessage: '',
+        toastAlertType: '',
+        showToast: false, 
+    },
+    mutations: {
+        UPDATE_TOAST_MESSAGE (state, payload) {
+            state.toastMessage = payload;
+        },
+        UPDATE_TOAST_ALERT_TYPE (state, payload) {
+            state.toastAlertType = payload;
+        },
+        UPDATE_TOAST_STATUS (state, payload) {
+            state.showToast = payload;
+        }
+    },
+    actions: {
+        triggerToast({ commit }, message, type = 'success') {
+            commit('UPDATE_TOAST_MESSAGE', message)
+            commit('UPDATE_TOAST_ALERT_TYPE', type)
+            commit('UPDATE_TOAST_STATUS', true)
+
+            setTimeout(() => {
+              commit('UPDATE_TOAST_MESSAGE', '')
+              commit('UPDATE_TOAST_ALERT_TYPE', '')
+              commit('UPDATE_TOAST_STATUS', false)
+            }, 5000)
+          }
+    },
+    getters: {
+        toastMessageWithSmile (state) {
+            return state.toastMessage + '^_^';
+        }
+    },
+}