【Vue】Nuxt最佳实践之常用库封装(二)

站在巨人的肩膀上，以下代码借鉴于 cmn-utils 公共函数&请求封装，感谢作者 LANIF-UI 的开源贡献，有兴趣的小伙伴可以参考基于React+Dva的CMS后台管理系统 dva-boot

使用CRA(create-react-app v2) 构建的react dva 2 脚手架 支持动态路由、接口数据模拟、按功能分层、并且包含诸多实用的小组件

目录结构

1. 常用工具类封装
   1.1 持久化存储方案
   1.2 事件巴士(Event Bus)
   1.3 常用的工具类函数
   1.4 如何批量导出
2. 部署说明
   2.1 静态部署(generate)
   2.2 动态部署pm2简易实现
   2.3 自定义集群(ecosystem)
3. 团队协同
   3.1 代码管理 Git
   3.2 组件规范
   3.3 说明文档
   3.4 code review(CR)

---

常用工具类封装

• 持久化存储方案 store2 + vuex-persistedstate

一个功能丰富和友好的方式来利用localStorage和sessionStorage (JSON、命名空间、扩展等)。

具体实现方式，npm i store2 vuex-persistedstate -S，实现思路，封装基本的增删改查至Store类，并结合 vuex-persistedstate 实现 vuex 持久化存储, 并单独新建一个js文件对外导出(避免多次实例化)，即 单例模式

getStore = (key, alt) => this.store.get(key, alt) ES7 提案，暂未纳入标准语法，把函数直接作为一个arrow function的属性来定义，初始化的时候就绑定好了 this 指针

推荐阅读: ES6、ES7、ES8、ES9、ES10新特性一览

附我最认同的一句话，代码首先是给人看的，其次是在机器上运行，所以写好注释很重要哦～

import store from 'store2';
import {
    isObject, isFunction } from '../util';

export default class Store {
   
  constructor(namespace) {
   
    this.store = namespace ? store.namespace(namespace) : store;
    this.session = this.store.session;
    this.local = this.store.local;
  }

  /**
   * 反回一个新的store
   */
  create = (namespace) => new Store(namespace)

  /**
   * 将 value 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容
   * Examples:
   *
   *   .setStore('name', 'abc')
   *   .setStore({ name: 'abc', age: 18 }) // 一次存多个
   * @param {string | object} key 
   * @param {any} value 
   */
  setStore = (key, value) => {
   
    if (isObject(key)) {
   
      this.store.setAll(key);
    } else {
   
      this.store.set(key, value);
    }
    return this;
  }

  /**
   * 从本地缓存中异步获取指定 key 对应的内容, 如指定alt当没找到时反回alt
   * @param {string} key 
   * @return {Promise}
   */
  getStoreAsync = (key, alt) => Promise.resolve(this.store.get(key, alt))
  /**
   * 从本地缓存中同步获取指定 key 对应的内容, 如指定alt当没找到时反回alt
   * @param {string} key 
   * @param {any} alt
   */
  getStore