解决vuex数据刷新丢失

Posted 2021-06-11 兜里有糖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
        }
    }
    })
  ]
})