状态持久化

为什么说刷新页面vuex的数据会丢失

刷新页面vuex的数据会丢失属于正常现象，因为JS的数据都是保存在浏览器的堆栈内存里面的，刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制，那么堆栈里的数据自然就清空了。

第一种方法用sessionStorage

将 数据保存在vuex的store里，也将这些信息也保存在sessionStorage里。注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面要重新刷新才可以看到改变，所以应让vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化。

这里还可以用 localStorage，但是它没有期限；所以常用的还是sessionStorage，当浏览器关闭时会话结束。

const state = {
  name: JSON.parse(sessionStorage.getItem("state_app_name")) || {}, 
}
const mutations = {
  SET_Name: (state, payload) => {
    state.name = payload.name
    sessionStorage.setItem("state_app_name", JSON.stringify(payload.name))
  }
}
const actions = {
  setName({ commit }, payload) {
    commit('SET_Name', payload)
  }
}

export default {
  namespaced: true,//命名空间namespaced:true
  state,
  mutations,
  actions
}

vuex-along

vuex-persistedstate

vuex-persist

以上三种 插件 也是可以达到效果的 其原理都是存入到 sessionStorage或者 localStorage 中，通过配置实现，灵活性会高一点