Implemented signout functionality

src/components/NavBar.vue

@@ -8,7 +8,9 @@
       <div class="flex-grow-1"></div>
       <v-toolbar-items v-if="isLoggedIn">
         <v-btn text >Add Todo</v-btn>
-        <v-btn text >SignOut</v-btn>
+        <v-btn text
+        @click="logoutAction"
+        >SignOut</v-btn>
       </v-toolbar-items>
 
       <v-toolbar-items v-else>
@@ -20,14 +22,16 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
+
 export default {
 
   computed: {
     ...mapGetters(['isLoggedIn'])
   },
 
   methods: {
+    ...mapActions(['logoutAction']),
     redirectToHome () {
       this.$router.push('/')
     },

src/store/modules/user.js

@@ -26,6 +26,12 @@ export default {
       state.status = 'failure'
       state.token = ''
       state.user = {}
+    },
+
+    logoutMutation (state) {
+      state.user = ''
+      state.token = ''
+      state.status = null
     }
   },
 
@@ -54,6 +60,11 @@ export default {
             reject(error)
           })
       })
+    },
+
+    logoutAction ({ commit }) {
+      commit('logoutMutation')
+      localStorage.removeItem('token')
     }
   },
 

src/views/Home.vue

@@ -1,11 +1,14 @@
 <template>
   <div>
-    <h3>welcome to home</h3>
+    <h3>welcome {{this.userName}}</h3>
   </div>
 </template>
 
 <script>
-
+import { mapGetters } from 'vuex'
 export default {
+  computed: {
+    ...mapGetters(['userName'])
+  }
 }
 </script>