SolidScribe/client/src/App.vue

<template>
	<div id="app">
		<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet"> 
		<div>
			<router-link class="ui button" to="/">Home</router-link>

			<router-link v-if="loggedIn" class="ui button" to="/notes">Notes</router-link>
			<router-link v-if="!loggedIn" class="ui button" to="/login">Login</router-link>
			<div v-if="loggedIn" v-on:click="destroyLoginToken" class="ui button">Logout</div>
		</div>
		<router-view/>
	</div>
</template>

<script>

	
import { mapGetters } from 'vuex'

export default {

	data: function(){ 
		return {
			// loggedIn: 
		}
	},
	beforeCreate: function(){

		//Puts token into state on page load
		let token = localStorage.getItem('loginToken')
		if(token){
			this.$store.commit('setLoginToken', token)
		}
	},
	mounted: function(){
	},
	computed: {
		loggedIn () {
			//Map logged in from state
			return this.$store.getters.getLoggedIn
		}
	},
	methods: {
		destroyLoginToken() {
			this.$store.commit('destroyLoginToken')
		}
	}
}
</script>