vuex持久化存储 vuex-persistedstate

由于页面刷新会导致vuex中的状态更新（数据重置），但有时我们并不希望如此。例如，token、登录状态、以及一些不常更新的状态等，我们希望能够存储到本地，以减少不必要的接口请求，从而获得更佳的用户体验。那么可以使用vuex-persistedstate来实现数据的持久化存储。vue3.0 与vue2使用情况是一样的。

1.安装

npm i -s vuex-persistedstate

2.在store/index.js中使用

import { createStore } from "vuex";
import persistedState from 'vuex-persistedstate'
// import * as Cookies from 'js-cookie' // 使用方式二时需引入
export default createStore({
  modules: {},
  // 方式一： 使用sessionStorage的情况，如：safari的无痕浏览模式
  plugins: [
    persistedState({ storage: window.sessionStorage })
  ]
  
  // 方式二： 使用localStorage的情况，如：safari的无痕浏览模式
  // plugins: [
  //  persistedState({ storage: window.localStorage })
  // ]

  // 方式三： 使用cookie的情况
  // plugins: [
  //   persistedState({
  //     storage: {
  //       getItem: key => Cookies.get(key),
  //       setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
  //       removeItem: key => Cookies.remove(key)
  //     }
  //   })
  // ]
});