Vue常用插件：vuex-persistedstate

简介

存储到vuex的数据，在页面刷新时会重置
可以手动将数据存储到cookies、localStorage等地方
使用该插件可以做到自动存储

安装

插件安装：npm i vuex-persistedstate --save

使用

修改src/store/index.js文件

// ...
import createPersistedState from 'vuex-persistedstate'
// ...
export default new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

部分自动存储

部分state自动存储到localStorage中；其他state不做自动存储

比如有如下state，其中mobile、sidebar、user、deviceId和sessionId自动存储到localStorage中，其他不做自动存储

const state = {
  mobile: false,
  sidebar: {
    show: true,
    fixed: false,
    left: 0
  },
  user: {},
  deviceId: '',
  sessionId: '',
  wsState: 3,
  arrFirst: []
}

export default state

• 修改src/store/index.js文件

// ...
import createPersistedState from 'vuex-persistedstate'
// ...
export default new Vuex.Store({
  // ...
  plugins: [createPersistedState({
    reducer(obj) {
      const { mobile, sidebar, user, deviceId, sessionId } = obj
      return { mobile, sidebar, user, deviceId, sessionId }
    }
  })]
})