Vuex数据持久化的两种方式:手动存储和vuex-persistedstate插件详解

//在根组件.vue中添加如下代码 app.vue
created () {
  window.addEventListener('beforeunload', () => {
    sessionStorage.setItem('list', JSON.stringify(this.$store.state))
   })
  try {
    sessionStorage.getItem('list') && this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('list'))))
   } catch (err) {
     console.log(err)
   }
   sessionStorage.removeItem('list')
  }

npm i vuex-persistedstate

//vuex：store.js文件内容如下
import Vue from 'vue'
import Vuex from 'vuex'
// 1. 导入包
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  // 2. 配置为 vuex 的插件
  plugins: [createPersistedState()],
  state: {
    token: ''
    ...
  },
})

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

npm i vuex-persistedstate

import { createStore } from 'vuex'

import user from './modules/user'
import cart from './modules/cart'
import cart from './modules/category'

export default createStore({
  modules: {
    user,
    cart,
    category
  }
})

import { createStore } from 'vuex'
+import createPersistedstate from 'vuex-persistedstate'

import user from './modules/user'
import cart from './modules/cart'
import cart from './modules/category'

export default createStore({
  modules: {
    user,
    cart,
    category
  },
+  plugins: [
+    createPersistedstate({
+      key: 'erabbit-client-pc-store',
+      paths: ['user', 'cart'] //需要持久化的modules
+    })
+  ]
})