解决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]
})

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