token(数据)的持久化管理，借助插件vuex-persistedstate

• token 需要做持久化存储方案一 ：

  • vuex 配合 localStorage：

    • token 数据一式两份存储的原因：

      1. vuex 基于内存进行存储，速度快，但是刷新就会丢失，
      2. localStorage 基于磁盘进行存储，存取较慢，但是刷新不会丢失
    • vuex 和 localStorage 结合使用就能实现 token 的持久化存储

• token 需要做持久化存储方案二 ：

  • 使用插件完成 --> vuex-persistedstate

    • 在 vuex 中准备 user、cart 模块
    • 将插件配置到 vuex 的 plugins 选项中，配置 user、cart 模块进行状态持久化
    • 修改 state 数据就会触发自动同步机制，可以修改一下数据监测测试是否同步成功

    • 步骤： [文档： https://developer.aliyun.com/...]

      • 安装：npm i vuex-persistedstate
      • 在 src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 cart.js --> [src/store/modules/user.js]
    • 使用插件需要去到 store/index.js 的 plugins 下进行插件管理
    • 触发的机制： paths 中配置的模块中数据发生改变插件会自动帮助同步

• 注意：

  • 数据持久化的实现默认是将数据存在 localStorage 中的，但是这个可以被定义
  • paths 用于指定持久化的数据对象，可以是整个模块，也可以指定单个数据 --> user.token

  • paths 中配置的模块中数据发生改变插件会自动帮助同步，执行的流程是：

    • 每次数据改变会将 vuex 的数据同步到 localStorage，然后刷新的时候将 localStorage 的数据同步到 vuex

// 从之前的 new 方法变成了 createStore 其他不变
import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'    //根据文档引入插件
import Cookies from 'js-cookie'
//将拆分的模块引入进来
import user from './modules/user'
import cart from './modules/cart'

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    user,
    // cart
  },
  plugins: [
    // 可以配置 vuex 的第三方插件
    /**
     * 这里有一个 storage 的选项：
     *  是插件开放给开发者自定义存储数据所有方法的接口
     *  在接口中需要按照要求配置三个方法，存、取、删
     *  getItem setItem removeItem
     *  插件不关心数据最终会被存到哪里，只要有这三个方法，数据的存储位置有开发者指定
     * 
    */
    createPersistedState({
      key: '', //存储持久状态的键 --> 存入浏览器时的 key 值，可以通过该值 获取到持久化存储的数据
      paths: ['user', 'cart'], //部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的  --> 持久化管理的模块
      //默认是存储到 localStorage 中的，可以下载 js-cookie 插件配置一下存储到 cookies 中，如下:
      storage:{
        getItem: (key) => {//配置cookie数据的存、取、删方法
          Cookies.get(key)
        },   
        setItem: (key, value) => {
          console.log('存储数据',key,value);
          //配置 cookie 的存储方法，键值对。  expires 是设置的过期时间，这里 7 天后过期
          Cookies.set(key, value, {expires: 7})
        },
        removeItem: (key) => Cookies.remove(key)
      }
    })
  ]
})