解决Vue单页应用刷新页面store状态丢失的通用方案

问题:单页应用刷新页面时重新执行了初始化, 会导致store初始化 部分状态会丢失

原理:
1、当store变化时 自动监听 保证把最新状态存储在本地
2、初始化时 重新把本地的状态给store

别的方案: 监听页面的状态,关闭页面时把store存起来,打开页面时给store赋值

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import authInfo from './modules/auth-info'
import common from './modules/common'

Vue.use(Vuex)

const getLocalStores = () => {
const state = sessionStorage.getItem('localStores')
try {
return JSON.parse(state)
} catch (e) {
return null
}
}
// 监听store变化 自动把最新状态存在本地
const setLocalStores = store => {
store.subscribe((mutation, state) => {
sessionStorage.setItem('localStores', JSON.stringify(state))
})
}

const store = new Vuex.Store({
modules: {
authInfo,
common
},
getters,
plugins: [setLocalStores]
})
// 初始化时 自动抓取上一次的store状态
const storageState = getLocalStores()
storageState && store.replaceState(storageState)

export default store

你可能感兴趣的:(解决Vue单页应用刷新页面store状态丢失的通用方案)