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中取值。

转载于:https://www.cnblogs.com/lst619247/p/10690096.html