vuex中store保存的數據，刷新頁面會清空

用vuex，項目中需要記錄一些狀態，來判斷頁面是否為登錄狀態和頁面是否可被編輯，此時用到了vuex中的store來存儲一個狀態。

//首先 安裝vuex
npm install vuex --save  
//新建一個store文件夾，並在里面創建一個index.js文件，並導入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state:{
        //id
        skillId:'',
        //技能狀態
        checkStatus:''
    }
})

export default store

這里記錄了兩個值一個是id一個是狀態值checkStatus,然后把創建的store在main.js里導入

import store from "./store"//vuex

至此，我們可以在所需要的vue文件中為其賦值

this.$store.state.skillId = '需要記錄的id'
//技能狀態
this.$store.state.checkStatus = '需要記錄的狀態'

賦值后，就可以在需要用到這些id和狀態的vue文件中取值

'自己定義的變量名' = this.$store.state.checkStatus

現在，skillId和checkStatus相當於兩個全局變量，可以在需要的頁面獲取值和更改值。但有一個嚴重的問題就是，在我們刷新頁面的時候，vuex數據是重新初始化，無法獲取的，導致出現了空值。
但這不是自己想要的結果，所以百度了一圈（ https://blog.csdn.net/guzhao593/article/details/81435342， http://www.cnblogs.com/padding1015/p/9272809.html），找到了解決辦法。
更改store文件下index文件state的定義

const store = new Vuex.Store({
    state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')): {
        //id
        skillId:'',
        //技能狀態
        checkStatus:''
    }
})

以及在App.vue中添加

mounted() {
            window.addEventListener('unload', this.saveState)
        },
        methods: {
            saveState() {
                sessionStorage.setItem('state', JSON.stringify(this.$store.state))
            }
        }

也就是說監聽unload方法，如果重載頁面就把state存入
sessionStorage，然后在需要state的時候從sessionStorage中取值。