hansanghoon/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue router + Vuex</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router"></script>
    <script src="https://unpkg.com/vuex"></script>
</head>
<body>
    <h1>Vue + Vue-Router + Vuex</h1>
    <div id="app"></div>
    <script src="main.js"></script>
</body>
</html>

## main.js
Vue.use(Vuex)

//init store
const store = new Vuex.Store({
    state: {
        input1 : 'blank'
     },
     mutations: {
         updateInput (state, value) {
             state.input1 = value;
         }
     }
});
Vue.use(VueRouter);

const Home = {
    template : '<div><h2>Start</h2><router-link to="/step">start</router-link></div>'
};
const Step = {
    template : '<div><h2>Value</h2><input type="text" :value="input1" @input="updateInput"><router-link to="/result">save</router-link><span>{{input1}}</span></div>',
    methods : {
        updateInput(e) {
            this.$store.commit('updateInput', e.target.value);
        }
    },
    computed : {
        input1() {
            return this.$store.state.input1;
        }
    }
};
const Result = {
    template : '<div><span>result : </span><span>{{input1}}</span></div>',
    computed : {
        input1() {
            return this.$store.state.input1;
        }
    }
};

//define routes
const routes = [
    { path: '/', name: 'Home', component: Home },
    { path: '/step', name: 'Step', component: Step },
    { path: '/result', name: 'Result', component: Result }
];

//init app
const app = new Vue({
    router: new VueRouter({ routes }),
    store,
    template: '<transition><router-view></router-view></transition>'
}).$mount('#app')
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Vue router + Vuex</title>
	<script src="https://unpkg.com/vue"></script>
	<script src="https://unpkg.com/vue-router"></script>
	<script src="https://unpkg.com/vuex"></script>
	</head>
	<body>
	<h1>Vue + Vue-Router + Vuex</h1>
	<div id="app"></div>
	<script src="main.js"></script>
	</body>
	</html>
	Vue.use(Vuex)

	//init store
	const store = new Vuex.Store({
	state: {
	input1 : 'blank'
	},
	mutations: {
	updateInput (state, value) {
	state.input1 = value;
	}
	}
	});
	Vue.use(VueRouter);

	const Home = {
	template : '<div><h2>Start</h2><router-link to="/step">start</router-link></div>'
	};
	const Step = {
	template : '<div><h2>Value</h2><input type="text" :value="input1" @input="updateInput"><router-link to="/result">save</router-link><span>{{input1}}</span></div>',
	methods : {
	updateInput(e) {
	this.$store.commit('updateInput', e.target.value);
	}
	},
	computed : {
	input1() {
	return this.$store.state.input1;
	}
	}
	};
	const Result = {
	template : '<div><span>result : </span><span>{{input1}}</span></div>',
	computed : {
	input1() {
	return this.$store.state.input1;
	}
	}
	};

	//define routes
	const routes = [
	{ path: '/', name: 'Home', component: Home },
	{ path: '/step', name: 'Step', component: Step },
	{ path: '/result', name: 'Result', component: Result }
	];

	//init app
	const app = new Vue({
	router: new VueRouter({ routes }),
	store,
	template: '<transition><router-view></router-view></transition>'
	}).$mount('#app')