vuex在刷新页面时保持数据不变(vuex状态持久化)

问题:

在 vue 项目中使用 vuex 来进行数据状态的管理,当刷新页面时,vuex 中 state 的数据会出现初始化问题(数据丢失)

解决方法:

1.使用 webStorage 缓存

当浏览器窗口关闭或者刷新时,会触发beforeunload事件,此时,可以使用 webStorage 缓存来实现 vuex 在刷新页面时保持数据不变

created(){
   //在页面加载时读取sessionStorage里的状态信息
   if(window.sessionStorage.getItem("userInfo")) {
   		this.$store.state.userInfo = window.sessionStorage.getItem("userInfo")
   } 
   //在页面刷新时将vuex里的信息保存到sessionStorage里
   window.addEventListener("beforeunload", () => {
        window.sessionStorage.setItem("userInfo", this.$store.state.userInfo)
   })
}
2.使用vuex状态持久化插件vuex-persistedstate

vuex-persistedstate插件使用浏览器的本地存储( local storage )对 vuex 的状态( state )进行持久化

安装 vuex-persistedstate:

npm install vuex-persistedstate --save-dev

store文件夹的 index.js 中使用
//引入vuex-persistedstate
import createPersistedState from 'vuex-persistedstate'
......
export default new Vuex.Store({
  ......
  //配置vuex-persistedstate
  plugins: [createPersistedState(
  	//配置将vuex的状态储存到sessionStorage中(默认储存到localStorage中)
    { storage: window.sessionStorage }
  )]
})
Logo

前往低代码交流专区

更多推荐