vuex 数据持久化，防止刷新丢失

import Vue from 'vue'
import Vuex from 'vuex'
import router from '../routers'

Vue.use(Vuex)
import { getUserInfo } from '../api/index.js'

const store = new Vuex.Store({
  state: {
    userInfo: {}, // 用户信息
    remain_time: 300,
    remain_interval: null // 定时器
  },
  mutations: {
    // 时间减少
    TIME_SUBTRACT(state) {
      if (state.remain_time > 0) {
        state.remain_time--
      } else {
        clearInterval(state.remain_interval)
        state.remain_interval = null // 定时器清空
        state.remain_time = 300 // 重置时长
        router.push('/')
      }
    },
    // 清空时间
    TIME_CLEAR(state) {
      state.remain_time = 0
      router.push('/')
    },
    // 信息更新
    USER_UPDATE(state, payload) {
      state.userInfo = payload
    }
  },
  actions: {
    // 设置定时器
    startInterval({ commit, state }) {
      state.remain_interval = setInterval(function() {
        commit('TIME_SUBTRACT')
      }, 1000)
    },
    // 获取信息
    getUserInfo({ commit }) {
      getUserInfo().then(res => {
        console.log('res_获取用户信息', res)
        commit('USER_UPDATE', res.data)
      })
    }
  }
})

// 从sessionStorage中取值
if (sessionStorage.getItem('store')) {
  store.replaceState(
    Object.assign(
      {},
      store.state,
      JSON.parse(sessionStorage.getItem('store'))
    )
  )
  if (store.state.remain_time > 0 && store.state.remain_interval !== null) {

    store.dispatch('startInterval')
  }

　　 sessionStorage.removeItem('store')

}

// 监听页面刷新，将数据全部保存到sessionStorage中
window.addEventListener('beforeunload', () => {
  sessionStorage.setItem('store', JSON.stringify(store.state))
})

export default store

思路：

1、store需要先被实例化

2、需要持久化保存的数据，自己随便起名就能存，我这里默认是保存所有数据了

3、牵扯到定时器的，刷新页面被自动清除了，需要自己重新激活

以上。