Add reset user functionality

Refactor edit user form so the store doesn't update the synced value
until you hit the save button. Add reset functionality by manually
resetting the form back to it's original state.

Move getUser() to the App level and call it on the created
lifecycle hook.

Author: jfusco

src/components/Header.vue

@@ -1,16 +1,18 @@
 <template>
 	<div>
-		Hello: {{user.firstName}} {{user.lastName}}
+		Hello: {{fullName}}
 	</div>
 </template>
 
 <script type="text/babel">
 	import Vue from 'vue'
-	import { mapState } from 'vuex'
+	import { mapGetters } from 'vuex'
 
 	export default Vue.component('app-header', {
-		computed: mapState([
-			'user'
-		])
+		computed: {
+			...mapGetters([
+				'fullName'
+			])
+		}
 	})
 </script>

src/components/Nav.vue

@@ -1,5 +1,5 @@
 <template>
-	<nav>
+	<nav v-once>
 		<ul role="menu">
 			<li role="presentation">
 				<router-link to="/" exact>home</router-link>

src/pages/App.vue

@@ -16,11 +16,22 @@
 <script type="text/babel">
 	import appHeader from '../components/Header.vue'
 	import appNav from '../components/Nav.vue'
+	import { mapActions, mapState } from 'vuex'
 
 	export default {
 		components: {
 			appHeader,
 			appNav
+		},
+
+		methods: {
+			...mapActions([
+				'getUser'
+			])
+		},
+
+		created(){
+			this.getUser()
 		}
 	}
 </script>

src/pages/EditUser.vue

@@ -2,16 +2,17 @@
 	<div>
 		<h2>Edit user</h2>
 
-		<input v-model="user.firstName" placeholder="First name" />
-		<input v-model="user.lastName" placeholder="Last name" />
-		<input v-model="user.age" type="number" placeholder="Age" />
+		<input v-model="form.firstName" placeholder="First name" />
+		<input v-model="form.lastName" placeholder="Last name" />
+		<input v-model="form.age" type="number" placeholder="Age" />
 
-		<select v-model="user.gender">
+		<select v-model="form.gender">
 			<option value="male">male</option>
 			<option value="female">female</option>
 		</select>
 
 		<button v-on:click="save">save</button>
+		<button v-on:click="reset">reset</button>
 	</div>
 </template>
 
@@ -20,19 +21,40 @@
 	import { mapActions, mapState } from 'vuex'
 
 	export default {
+		data: () => {
+			return {
+				form: {
+					firstName: '',
+					lastName: '',
+					age: '',
+					gender: ''
+				}
+			}
+		},
+
 		methods: {
 			...mapActions([
-				'getUser',
 				'updateUser'
 			]),
 
 			save(){
-				this.updateUser(this.user)
+				this.updateUser(this.form)
+			},
+
+			reset(){
+				this.update()
+			},
+
+			update(){
+				this.form.firstName = this.user.firstName
+				this.form.lastName = this.user.lastName
+				this.form.age = this.user.age
+				this.form.gender = this.user.gender
 			}
 		},
 
 		mounted(){
-			this.getUser()
+			this.update()
 		},
 
 		computed: mapState([

src/store/modules/user/index.js

@@ -24,8 +24,15 @@ const mutations = {
 	}
 }
 
+const getters = {
+	fullName: state => {
+		return `${state.firstName} ${state.lastName}`
+	}
+}
+
 export default {
 	state,
 	mutations,
-	actions
+	actions,
+	getters
 }