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

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

作者: 前端大镖客_ | 来源:发表于2021-05-20 17:13 被阅读0次

    问题:单页应用刷新页面时重新执行了初始化, 会导致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状态丢失的通用方案

          本文链接:https://www.haomeiwen.com/subject/fqdbjltx.html