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

Posted 2022-06-22 xzdm

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、牵扯到定时器的，刷新页面被自动清除了，需要自己重新激活

以上。