logout functioning

src/App.vue

@@ -2,12 +2,29 @@
   <div id="app">
     <div id="nav">
       <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
+      <router-link to="/about">About</router-link> |
+      <router-link to="/login" v-if="!authenticated">Log in</router-link>
+      <a href="#" v-if="authenticated" @click="$store.dispatch('signOut')">Log out</a>
     </div>
     <router-view/>
   </div>
 </template>
 
+<script>
+
+export default {
+  name: 'app',
+  computed: {
+    authenticated(){
+      return this.$store.getters.isAuthenticated;
+    }
+  },
+  mounted() {
+    // console.log(this.authenticated);
+  }
+}
+</script>
+
 <style lang="scss">
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;

src/main.js

@@ -28,5 +28,12 @@ Vue.use(ui);
 new Vue({
   router,
   store,
-  render: h => h(App)
+  render: h => h(App),
+  created () {
+    window.firebase.auth().onAuthStateChanged((user) => {
+      if(user){
+        store.commit('user', user);
+      } 
+    });
+  }
 }).$mount('#app')

src/router.js

@@ -17,16 +17,17 @@ const router = new Router({
   mode: 'history',
   base: process.env.BASE_URL,
   routes: [
+    {
+      path: '/login',
+      name: 'login',
+      component: Login
+    },    
     {
       path: '/',
       name: 'home',
       component: Home
     },    
-    {
-      path: '/login',
-      name: 'login',
-      component: Login
-    },
+
     {
       path: '/about',
       name: 'about',

src/store.js

@@ -5,18 +5,18 @@ import { firebase } from '@/plugins/firebase-init'
 
 Vue.use(Vuex)
 
-
-
-const store = new Vuex.Store({
-  state: {
+const defaultState = {
     user: {
       uid: null,
       displayName: null,
       photoURL: null,
       email: null,
       phoneNumber: null,
     }
-  },
+  };
+
+const store = new Vuex.Store({
+  state: defaultState,
   getters: {
     isAuthenticated: state => {
       return state.user.uid !== null;
@@ -35,14 +35,12 @@ const store = new Vuex.Store({
 
   },
   actions: {
-
+    signOut: async ( { dispatch, commit } ) => {
+      await firebase.auth().signOut();
+      commit('user', defaultState);
+      window.location.reload();
+    }
   }
 })
 
-/** May not need..? */
-firebase.auth().onAuthStateChanged(user => {
-  console.log('auth change', user)
-  store.commit('user', user);
-});
-
 export default store;