vuex刷新时数据丢失问题

最新推荐文章于 2023-07-17 17:55:58 发布

weixin_45412736

最新推荐文章于 2023-07-17 17:55:58 发布

阅读量68

点赞数

分类专栏： vuex 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45412736/article/details/122862259

版权

vuex 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、刷新时使用sessionStorage储存state

created() {
  if (sessionStorage.getItem('store')) {
    this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    sessionStorage.removeItem('store')
  }
  window.addEventListener('beforeunload', () => {
    sessionStorage.setItem('store', JSON.stringify(this.$store.state))
  })
}

二、vuex-persistedstate插件

1.安装

npm install vuex-persistedstate --save

2.默认持久化所有state

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

import createPersistedState from "vuex-persistedstate"

const store = new Vuex.Store({
  modules: {
    user,
  },
  plugins: [createPersistedState()]
})
export default store


注：createPersistedState({
    storage: window.sessionStorage，
    storage: window.cookie,
    storage: window.localStorage
})

3.指定需要持久化的state

  plugins: [createPersistedState({
    // 只能获取到state.user.username  的值
    reducer: state => {
      const username = state.user.username
      return {
        username
      }
    }
  })]