为什么需要数据持久化

vuex的state数据刷新页面的时候数据都会被清空，在某些情况下，我们需要这些状态能保存下来，比如登录后的用户信息、Token、主题配置等。

vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。

vuex劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

持久化原理：结合本地存储做到数据状态持久化，使页面刷新后数据不会初始化为默认状态。

方案一：封装 storage 存储模块，利用本地存储

方案二：安装一个vuex的插件 vuex-persistedstate

一、方案一：利用本地存储进行 vuex 持久化处理

1.1、封装store.js代码如下

/**
 * 判断是否为空
 */
function validatenull(val) {
  if (typeof val === "boolean") {
    return false;
  }
  if (typeof val === "number") {
    return false;
  }
  if (val instanceof Array) {
    if (val.length === 0) return true;
  } else if (val instanceof Object) {
    if (JSON.stringify(val) === "{}") return true;
  } else {
    if (
      val === "null" ||
      val == null ||
      val === "undefined" ||
      val === undefined ||
      val === ""
    )
      return true;
    return false;
  }
  return false;
}
/* 定义存储的keyName */
const keyName = "xxxx" + "-";
/**
 * type如果有值就是sessionStorage存储，不传就是localStorage存储
 */
export const setStore = (params = {}) => {
  let { name, content, type } = params;
  name = keyName + name;
  const obj = {
    dataType: typeof content,
    content: content,
    type: type,
    datetime: new Date().getTime(),
  };

  if (type) {
    window.sessionStorage.setItem(name, JSON.stringify(obj));
  } else {
    window.localStorage.setItem(name, JSON.stringify(obj));
  }
};
/**
 * 获取存储的值
 */

export const getStore = (params = {}) => {
  let { name } = params;
  name = keyName + name;
  let obj = {};
  let content;
  obj = window.sessionStorage.getItem(name);
  if (validatenull(obj)) obj = window.localStorage.getItem(name);
  if (validatenull(obj)) return;
  try {
    obj = JSON.parse(obj);
  } catch (e) {
    return obj;
  }
  if (obj.dataType === "string") {
    content = obj.content;
  } else if (obj.dataType === "number") {
    content = Number(obj.content);
  } else if (obj.dataType === "boolean") {
    content = eval(obj.content);
  } else if (obj.dataType === "object") {
    content = obj.content;
  }
  return content;
};
/**
 * 删除缓存 type有值清除sessionStorage缓存，没有值清除localStorage缓存
 */
export const removeStore = (params = {}) => {
  let { name, type } = params;
  name = keyName + name;
  if (type) {
    window.sessionStorage.removeItem(name);
  } else {
    window.localStorage.removeItem(name);
  }
};

1.2、vuex中使用

import { getStore, setStore } from "@/util/store";
const user = {
  state: {
    userInfo:
      getStore({
        name: "userInfo",
      }) || {},
    token:
      getStore({
        name: "token",
      }) || "",
  },
  mutations: {
    SET_USER_INFO: (state, userInfo) => {
      state.userInfo = userInfo;
      setStore({
        name: "userInfo",
        content: userInfo,
        type: "session",
      });
    },
    SET_TOKEN: (state, token) => {
      state.token = token;
      setStore({
        name: "token",
        content: state.token,
        type: "session",
      });
    },
  },
};
export default user;

二、方案二：利用插件vuex-persistedstate

2.1、安装插件 vuex-persistedstate

npm install vuex-persistedstate --save

2.2、vuex-persistedstate默认存储到localStorage

import createPersistedState from 'vuex-persistedstate';
 
Vue.use(Vuex);
export default new Vuex.store({
    //...
    plugins:[createPersistedState] // 注意
})

2.3、使用vuex-persistedstate自定义存储方式

2.3.1、存储到sessionStorage

import createPersistedState from 'vuex-persistedstate';
 
Vue.use(Vuex);
export default new Vuex.store({
    //...
    plugins:[
        createPersistedState({
            storage:window.sessionStorage // 注意
        })
    ]
})

2、存储到cookie

import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
 
export default new Vuex.Store({
  // ...
  plugins: [
    createPersistedState({ // 注意
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

2.4、部分数据持久化

2.4.1、vuex-persistedstate提供有一个reducer函数，可以自定义存储Key

// 实现持久化部分数据，被持久化的数据为：manage模块的isVisitor、login模块的time

import createPersistedState from 'vuex-persistedstate';
 
Vue.use(Vuex);
export default new Vuex.store({
    modules:{
        manage,
        login,
        userInfo,
        //...
    },
    strict:debug,
    plugins:[
        createPersistedState({
            reducer(val){ // 注意: 指定需要持久化的数据
                return {
                    isVisitor:val.manage.isVisitor,
                    time:val.login.time
                }
            }
        })
    ]
})

2.4.2 使用paths参数【推荐：使用更为简单】

// 实现持久化部分数据，被持久化的数据为：manage模块的isAdmin、login模块的token
 
import createPersistedState from 'vuex-persistedstate';
 
Vue.use(Vuex);
const PERSIST_PATHS = ['manage.isAdmin','login.token']; // 注意
export default new Vuex.store({
    modules:{
        manage,
        login,
        userInfo,
        //...
    },
    strict:debug,
    plugins:[
        createPersistedState({
            paths:PERSIST_PATHS // 注意
        })
    ]
})