关于vuex刷新页面数据丢失的问题

在讲vuex数据丢失的问题之前呢，先讲怎么写vuex
1.需要配置（我这里由于需要的内容可能以后会用到，所以分开来写的）
在vue的src目录下创建一个store文件夹 里面有store.js、getters和modules文件夹
modules文件夹下有app.js和user.js文件

store.js在全局main.js里引入

import store from './store/store'

在store.js里写

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import user from './modules/user'
Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    user
  },
  getters
})
export default store

然后在user.js里写

import axios from 'axios'
import '../../axios/index'
import qs from 'qs'
import Cookies from 'js-cookie'
const user = {
  state: {
    kk: {},
    getJurisdiction: []
  },
  mutations: {
    // getJurisdiction
    SET_KK: (state, kk) => {
      state.kk = kk
    },
    //设置需要存到vuex里的数据
    SET_GETJURISDICTION: (state, getJurisdiction) => {
      state.getJurisdiction = getJurisdiction
    }
  },
  actions: {
    //   登录 在登录按钮函数里执行这个函数 （接口自己调整 kk是登录的时候传进来的参数）
    Login({
      commit
    }, kk) {
      return new Promise((resolve, reject) => {
        axios({
          method: 'post',
          url: '/auth/adminLogin',
          data: qs.stringify(kk),
          dataType: Object
        }).then(res => {
          Cookies.set('token', res.data.result)
          Cookies.set('userName', res.data.message)
          commit('SET_GETJURISDICTION', res.data.perms)
          //导出接口需要的数据
          resolve(res.data)
          //   console.log(res)
        }).catch(error => {
          reject(error)
        })
      })
    }
    // // 登出
    // LogOut({
    //   commit
    // }) {
    //   return new Promise(resolve => {
    //     removeToken()
    //     removeIsLogin()
    //     removeUserInfo()
    //     // localStorage.removeItem('groupList')
    //     resolve()
    //   })
    // }
  // }
  }
}

export default user

在getters.js里写 分开写是为了方便管理和编写

const getters = {
  //就是为了使用的时候取出来
  getJurisdiction: state => state.user.getJurisdiction,
  kk: state => state.user.kk
}
export default getters

在登录的时候这么写this.$store.dispatch(‘要调用的函数’, 要传的参数)

this.$store.dispatch('Login', this.kk).then(r => {
          //登录存储权限防止刷新丢失数据
          //this.getJurisdiction = r
          //window.localStorage.setItem("getJurisdiction",JSON.stringify(this.getJurisdiction));
         if(r.code=="200"){
              this.$router.push('/platform')
          }else{
              this.loginShow = true;
          }
        }).catch(r => {
          // this.$router.push({ path: '/' })
          this.loginShow = true;
        })

然后这个时候已经存储在运行内存中了也就是vuex里了，但是，这个时候回有一个问题，就是刷新页面的时候 数据丢失， 我这里的解决办法是
在APP.vue的created()生命周期里这么写

//在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("getJurisdiction")) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("getJurisdiction"))))
    } 

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("getJurisdiction",JSON.stringify(this.$store.state))
    })

最后 别忘了退出登录的时候清除sessionStorage里存的值 以防值会覆盖出错