解决vuex数据刷新丢失

Posted 2022-11-15 兜里有糖0831

解决vuex数据刷新丢失

1. 补充本地存储 localStorage

   在app.vue中使用

created()

//在页面加载时读取localStorage里的状态信息
    localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));

//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>
    localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
)

2. 插件vuex-persistedstate

1）安装 npm install vuex-persistedstate --save

2）引入以及配置

​ 在store下的index.js中

const store = new Vuex.Store(
  plugins: [createPersistedState()]
)

3）vuex-persistedstate默认持久化所有state，指定需要持久化的state,配置如下：
plugins后面加数组可以配置多个

import Vuex from 'vuex'
import getters from './getters'
import user from './modules/user'

// vuex-persistedstate默认持久化所有state，指定需要持久化的state

import createPersistedState from "vuex-persistedstate" Vue.use(Vuex)

export default new Vuex.Store(
  modules:  user ,
  getters,
  plugins: [
    createPersistedState(
      storage: window.sessionStorage,
      reducer(val) 
          return 
          // 只储存state中的user
          user: val.user
        
    
    )
  ]
)