探索vue2框架的世界：vuex持久化，存储的数据刷新页面后导致数据丢失？

vuex中存储的数据，刷新页面后导致数据丢失

一、问题

使用vuex存储全局数据后，刷新浏览器页面导致数据丢失

二、原因

刷新页面时，vue实例重新加载，因此导致store也随之被重置
store是用来存储组件状态的，而不是用来做本地数据存储的
对于不希望页面刷新之后被重置的数据，推荐使用本地存储来进行存储

vuex的状态储存是响应式的，当我们使用vuex进行全局状态管理时，vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效刷新，vuex存储的数据只是在页面中，相当于我们定义的全局变量，刷新之后，会发现之前获取的vuex状态的数据消失了，里面的数据就会恢复到初始化的状态。因为，刷新页面后，vuex会重新更新state

三、解决

方法一：

监听页面是否刷新，如果页面刷新了，将state对象存入到sessionStorage/localStorage中。
页面打开之后，判断sessionStorage/localStorage中是否存在state对象，如果存在，则说明页面是被刷新过的，将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。如果不存在，说明是第一次打开，则取vuex中定义的state初始值。
示例代码请在 App.vue 中

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  created() {
    // 在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem('store'))
        )
      )
    }

    // 页面刷新时，将vuex里的信息保存到sessionStorage
    // 在页面刷新时先触发beforeunload事件
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  },
}
</script>

方法二：

安装插件

vuex-persistedstate实现数据持久化，来解决使用vuex存储状态时页面刷新后数据消失的问题
vuex-persistedstate：在页面重新加载之间保持并重新补充Vuex状态

npm install --save vuex-persistedstate

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)
const store = new Vuex.Store({
  // 定义状态
  state: {
    isopen:'',
    isThirdAuthDev:false,
    isDataSourceDev:false,
    isDDioDev:false,
    ismappingBindDev1:false,
    ismappingBindDev2:false,
    id: '',
    nickname: '',
    username: '',
    password: '',
    remember: '',
    fieldsbind:[],
    bindList:{}
  },
  mutations: {
    // 相当于编写set方法
    setUser (state, data) {
      state.nickname = data
    },
    setUserId (state, data) {
      state.id = data
    },
    setUsername (state, data) {
      state.username = data
    },
    setPassword (state, data) {
      state.password = data
    },
    setRemember (state, data) {
      state.remember = data
    },
    clear (state) {
      for (const i in state) {
        delete state[i]
      }
    },
    setTest(state,data){
      if(data.isopen){
         state.isopen=data.isopen;
          
      }else if(data.isThirdAuthDev){
        state.isThirdAuthDev=data.isThirdAuthDev
         
      }else if(data.isDataSourceDev){
        state.isDataSourceDev=data.isDataSourceDev
        
      }else if(data.isDDioTestDev){
        state.isDDioDev=data.isDDioDev
        
      }else if(data.ismappingBindDev1){
         state.ismappingBindDev1=data.ismappingBindDev1
          
      }else if(data.ismappingBindDev2){
        state.ismappingBindDev2=data.ismappingBindDev2
      
     }
     console.log(state)
    },
    
  },
  actions: {
    // 写一些异步的操作
    // setUserAysnc (context, LoginUser) {
    //   context.commit('setUser', LoginUser)
    // }
  },
  modules: {},
  plugins: [
    createPersistedState({
      storage: window.localStorage,
      reducer (state) {
        return {
          id: state.id, // 持久化
          nickname: state.nickname,
          username: state.username,
          password: state.password,
          remember: state.remember,
          isopen:state.isopen,
          isThirdAuthDev:state.isThirdAuthDev,
          isDataSourceDev:state.isDataSourceDev,
          isDDioDev:state.isDDioDev,
          ismappingBindDev1:state.ismappingBindDev1,
          ismappingBindDev2:state.ismappingBindDev2,
        }
      }
    })
  ]
})
export default store

四、补充

cookie： 不适合存储较大的数据 （一段不超过4KB的小型文本数据）
localStorage： 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除（永久存储）
sessionStorage： 临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据（推荐）