前言

  在vue项目中，当我们的应用遇到多个组件之间的共享问题时，通常会用到Vuex（一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化），解决组件之间同一状态的共享问题。但是在刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

解决办法

使用vuex-persistedstate 插件

1.安装插件：npm install vuex-persistedstate --save
2.在store的index.js中，手动引入插件并配置

import createPersistedState from "vuex-persistedstate"
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  // 如果此刻想配置多个选项，将plugins写成一个一维数组，不然会报错
  plugins: debug ? [createLogger(), createPersistedState()] : [createPersistedState()]
})

这样的话会在Application里面看到一个vuex的存储，但是该插件默认持久化所有state，我们也可以指定需要持久化的state：

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState({
  storage: window.sessionStorage,
  reducer(data) {
   return {
   // 设置只储存state中的boxId
   boxId: data.boxId
  }
  }
 })]