解决Vuex刷新页面数据丢失问题 ---- vuex-persistedstate持久化数据

何为Vuex？用处是什么？为什么刷新丢失？

1. Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 --官方回答
2. 组件化开发作为前后端分离模式的一大特点但也伴随组件之间的通信的问题，当项目庞大、数据共享场景多、多层组件通信时，这时它就应该出现了，它为开发者提供简便的数据共享中心，不用再去纠结组件之间怎么传递数据了
3. 刷新页面数据没了，咋那么怪异？？？作为共享数据管理，不应该是一直存在的么？刚开始时至少我是这样认为的！随着翻阅资料发现就应该是这结果，要是刷新页面数据不丢失就不正常了；因为我们JS的数据都是保存在浏览器的堆栈内存里面的，倘若刷新页面数据不丢失，那堆栈里的数据何时消失呢，项目一大全部数据都保留在浏览器堆栈，浏览器不炸不卡死科学么？有那么大内存的浏览器么？刷新浏览器页面，以前堆栈申请的内存被释放！这就是浏览器的运行机制。想通JS运行机制时，发现一些都能理解了。

页面刷新数据丢失既然是正常现象，那考虑的就应该是如何持久化数据了。

1. 手动使用localStorage、sessionStorage就可以了；
2. 既然用了Vuex那肯定就要用它相关的插件去实现嘛，这才说得过去，Vuex有2个插件去持久化数据：
   • vuex-persistedstate （接下来要讲的） 官链 https://www.npmjs.com/package/vuex-persistedstate
   • vuex-persist

我项目用的是vuex-persistedstate 所以就来讲讲这插件的用法了

1.如何引入这里就不说了，详情看上面官方链接

2.在我们使用Vuex的地方index.js里引入 我这没有区分开 state 和 mutations 写在一个文件里

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import CreatePersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

const state = {
  // loading
  showHttpLoading: false,
  // 用户code
  userCode: '',
  // unionId
  unionId: ''
}

const mutations = {
  // loading
  UPDATE_SHOW_HTTP_LOADING (_state, val) {
    _state.showHttpLoading = val
  },
  // 保存 code
  SAVE_USER_CODE (_state, val) {
    _state.userCode = val
  },
  // 保存 unionId
  SAVE_USER_UNIONID (_state, val) {
    _state.unionId = val
  }
}

// vuex-persistedstate默认持久化所有state 若不需要全部则把需要持久化的数据放到reducer里 比如 showHttpLoading、unionId 需要持久化 userCode不需要则不需要加入
const vuexPersisted = new CreatePersistedState({
  key: 'VuexPersisted',
  storage: window.sessionStorage, # // 可选择 localStorage、sessionStorage、cookie 看需求
  reducer: state => ({
    // loading
    showHttpLoading: state.showHttpLoading,
    // unionId
    unionId: state.unionId,
  })
})

// 向外暴露store对象
export default new Vuex.Store({
  state,
  mutations,
  actions,
  plugins: [vuexPersisted]
})

如果此刻想配置多个选项，将plugins写成一个一维数组，不然会报错

import CreatePersistedState from 'vuex-persistedstate'
import createLogger from 'vuex/dist/logger'
export default new Vuex.Store({
  state,
  mutations,
  actions,
  plugins: [createLogger(), createPersisted]
})

结语： 用问题、或有不对之处环欢迎留言