如何将vuex中的数据持久化？

疑问，为什么vuex中的数据在刷新浏览器后会丢失？

其实这不是问题，这恰恰是vuex的特性。造成这个特性的原因，是因为js存储变量的地方是在浏览器的堆栈内存中，浏览器刷新后，会释放掉内存，这就导致了数据的丢失。有时候我们不希望数据在刷新后丢失，以下介绍两种方法。

解决方案

1、使用storageAPI（一般使用sessionStorage）

将请求到的数据，存储在sessionStorage中，也保存在vuex中。需要注意的是，vuex中的数据与组件是响应式的，而sessionStorage不是，因此vuex中的状态需要从sessionStorage中得到。这样组件就可以响应式的变化。

实例如下

const state = {
  authInfo: JSON.parse(sessionStorage.getItem("COMPANY_AUTH_INFO")) || {}
}

const getters = {
  authInfo: state => state.authInfo,
}
const mutations = {
  SET_COMPANY_AUTH_INFO(state, data) {
    state.authInfo = data
    sessionStorage.setItem("COMPANY_AUTH_INFO", JSON.stringify(data))
  }
}

//actions 模块里无需使用 sessionStorage

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  //actions,
}

2、使用第三方插件

可以使用的插件有：vuex-along、vuex-persistedstate、vuex-persist

结语

其实所有的方法，基本都是使用sessionStorage来实现的。

【vuex】如何将vuex中的数据持久化？