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')