[Vue.js]Vuexで状態を管理する

#vuex-sampleという名称のプロジェクト作成
vue create vuex-sample

#マニュアル作成を選択( Manually select featuresを選択 )
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

#RouterとVuexへのチェックを追加
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
>(*) Router
 (*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

cd vuex-sample
npm run serve

npm install --save vuex-persistedstate

vuex-sample/
           ├─ node_modules/
           ├─ public/
           ├─ src/
　　　　　　     ├─ assets/
                ├─ components/
                ├─ store/
                ├─ router/
                ├─ views/
           ├─ babel.config.js
           ├─ package.json
           ├─ package-lock.json
           ├─ README.md

import Vue from 'vue'
import App from './App.vue'
import router from './router'　①
import store from './store'　②

Vue.config.productionTip = false

new Vue({
  router,　③
  store,　④
  render: h => h(App)
}).$mount('#app')

<template>
  <div id="app">
    <router-view/>　①
  </div>
</template>

<style>
・・省略
</style>

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/entry01',　①
    name: 'Entry01',
    component: () => import(/* webpackChunkName: "entry01" */ '../views/Entry01.vue')
    
  },
  {
    path: '/entry02',　②
    name: 'Entry02',
    component: () => import(/* webpackChunkName: "entry02" */ '../views/Entry02.vue')
  },
  {
    path: '/confirm',　③
    name: 'Confirm',
    component: () => import(/* webpackChunkName: "confirm" */ '../views/Confirm.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {　①
    input1: '',
    input2: ''
  },
  mutations: {　②
    setInput1: function(state, value) {
      state.input1 = value
    },
    setInput2: function(state, value) {
      state.input2 = value
    }
  },
  actions: {   ③
    setInput1: function(context, value) {
      context.commit('setInput1', value)
    },
    setInput2: function(context, value) {
      context.commit('setInput2', value)
    }	
  },
  
  plugins: [createPersistedState( {　④
  }
  )]  
})

<template>
	<div class="view-div">
		<h2>入力画面1</h2>
		<input type="text" v-model="input1"><br/> ①
		<button v-on:click="next">次へ</button>
	</div>
</template>

<script>
	export default {
		name: 'Entry01',
		data: () => ({
			input1 : ''　②
		}),
		mounted () {
			this.input1 = this.$store.state.input1　③
		},
		methods: {
			next: function(){
				this.$store.dispatch('setInput1', this.input1)　④
				this.$router.push( "/entry02" )　⑤
			}
		}
	}
</script>

<template>
	<div class="view-div">
		<h2>入力画面2</h2>
		<input type="text" v-model="input2"><br/>
		<button v-on:click="next">確認</button>		
	</div>
</template>

<script>
export default {
  name: 'Entry02',
  data: () => ({
	input2 : ''
  }),
  mounted () {
	  this.input2 = this.$store.state.input2
  },
  methods: {
	  next: function(){
		  this.$store.dispatch('setInput2', this.input2)
		  this.$router.push( "/confirm" )
	  }
  }
}
</script>

<template>
	<div class="view-div">
			<h2>確認</h2>
			input1:{{ $store.state.input1 }}<br/> ①
			input2:{{ $store.state.input2 }}　②
	</div>
</template>

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  ・・・省略
  
  plugins: [createPersistedState( {
    storage: window.sessionStorage  
  }
  )]  
})