vue-persistedstate/src/vuex.js

state management

/*
 * @Author: zhang_gen_yuan
 * @Date: 2022-04-15 15:51:42
 * @LastEditTime: 2022-04-26 22:02:21
 * @Descripttion:
 */

import deepClone from './utils/deepClone'

const createVuexPersistedState = (options = {}) => {
  const storage = options.storage || (window && window.localStorage);
  const key = options.key || "vuex";
  const whiteList = options.whiteList || [];
  const blackList = options.blackList || [];

  const isWhiteList = () => !!(whiteList && whiteList.length);
  const isBlackList = () => !!(blackList && blackList.length);

  const handlerList = (state, list, type) => {
    let newState = { ...state };
    let wObj = {};
    switch (type) {
      case "whiteList":
        for (let i = 0; i < list.length; i++) {
          if (newState.hasOwnProperty(list[i])) {
            wObj[list[i]] = newState[list[i]];
          }
        }
        return wObj;

      case "blackList":
        for (let i = 0; i < list.length; i++) {
          if (newState.hasOwnProperty(list[i])) {
            delete newState[list[i]];
          }
        }
        return newState;

      default:
        return state;
    }
  };
  const whiteState = (state) => {
    // let wState = JSON.parse(JSON.stringify(state));
    let wState = deepClone(state);
    return handlerList(wState, whiteList, "whiteList");
  };

  const blackState = (state) => {
    // let bState = JSON.parse(JSON.stringify(state));
    let bState = deepClone(state);
    return handlerList(bState, blackList, "blackList");
  };

  const getState = (key, storage) => {
    const value = storage.getItem(key);
    try {
      return typeof value !== "undefined" ? JSON.parse(value) : undefined;
    } catch (err) {
      console.warn(err);
    }
    return undefined;
  };

  // 设置state的值
  const setState = (key, state) => storage.setItem(key, JSON.stringify(state));

  return (store) => {
    const data = Object.assign(store.state, getState(key, storage));
    if (data) {
      store.replaceState(data);
    }
    store.subscribe((mutation, state) => {
      // let newState = JSON.parse(JSON.stringify(state));
      let newState = deepClone(state);
      //  处理名单
      if (isWhiteList() || isBlackList()) {
        if (isWhiteList()) {
          let isState = whiteState(state);
          setState(key, isState);
        }
        if (isBlackList()) {
          let isState = blackState(state);
          setState(key, isState);
        }
      } else {
        setState(key, newState);
      }
    });
  };
};
export default createVuexPersistedState;