Vuexのstoreの、load・unload時の復元・保存

# <i class="fa fa-cubes"></i> 概要

[TodoMVC - Vue.js]ほどリアルタイムでなく、Electronアプリ≒ウィンドウ起動・終了時に復元・保存できればいい考え。

となると、
[Vue インスタンス - Vue.js]
に則り、メインのルートコンポーネントの生成と破棄時イベントに設定すればいいかと思ったが、数個引っかかったので残す。

ただ、保存処理がスッキリしないので、できればvue内で完結したい。

# <i class="fa fa-graduation-cap" aria-hidden="true"></i> 結論

* (軽く試した限り)`destroyed`,`beforeDestroy`時には操作できなかった。
 * イベント自体が未発火なのか、`localStorage`操作ができないタイミングなのか、`Vuex`操作が出来ないタイミングなのかは未調査
 * なので、`window`などへ`beforeunload`時のイベントとして登録しよう。
* `state`はオブジェクトまるごと上書きは出来ないので、各`state`をそれぞれ上書きしよう

# <i class="fa fa-cogs"></i> 検証環境

```
node -v
v6.9.1
```

```json:package.json
{
  "dependencies": {
    "electron": "^1.6.8",
    "vue": "^2.3.3",
    "vue-loader": "^12.1.0",
    "vue-material": "^0.7.1",
    "vue-router": "^2.5.3",
    "vuex": "^2.3.1",
    "vuex-router-sync": "^4.1.2",
    "yarn": "^0.24.5"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.4",
    "electron-packager": "^8.7.0",
    "style-loader": "^0.18.1",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.0"
  }

```

# <i class="fa fa-code"></i> コード

state変更は含んでいない。

```js:main.js
import Vue from 'vue';
import app from './app.vue';
import store from './store.js';

new Vue({
    store,
    render: h => h(app),
}).$mount('#app');
```

```html:app.vue
<template>
<div id='app'>
</div>
</template>

<script>
import { mapActions, mapGetters} from 'vuex'

export default {
  name: 'app',
  methods: {
    ...mapActions(['set_state']),
  },
  computed :{
    ...mapGetters(['all_state']),
  },
  created() {
    const state = JSON.parse(localStorage.getItem('state'));
    if (state != null) {
      this.set_state({state})
    }
    // 終了時の動作をcreate時に定義する。
    // onbeforeunload = なら上書きに注意。
    // function式ならthisに注意。.bind(this)してやるなど。
    window.addEventListener('beforeunload', () => {
      // (getterの返し方により)stateオブジェクトまるごとなので値以外も含まれているが、そんなに大きくはない
      localStorage.setItem('state', JSON.stringify(this.all_state));
    })
  },
}
</script>
```

```js:store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = {
    hoge: '',
    huga: 0,
};

const mutations = {
    set_state(state, payload) {
        // state = payload.stateは無理
        const s = payload.state;
        state.hoge = s.hoge;
        state.huga = s.huga;
    },
};

const actions = {
    set_state({commit}, payload) {
        // (ここに限れば)特に意味はないaction
        commit('set_state', payload);
    },
};

const getters = {
    all_state(state) {
        // 特に意味はないgetter。
        return state;
    },
};

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters,
});
```


# <i class="fa fa-book"></i> 参考

[javascript - Do something before reload or close in vue.js - Stack Overflow]

[TodoMVC - Vue.js]:https://jp.vuejs.org/v2/examples/todomvc.html
[Vue インスタンス - Vue.js]:https://jp.vuejs.org/v2/guide/instance.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0


[javascript - Do something before reload or close in vue.js - Stack Overflow]:https://stackoverflow.com/questions/34443187/do-something-before-reload-or-close-in-vue-js