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

最新推荐文章于 2024-04-24 09:59:56 发布

置顶

AsnLee

最新推荐文章于 2024-04-24 09:59:56 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Nuxt 文章标签： vue.js node.js

本文链接：https://blog.csdn.net/qq_41597258/article/details/103845138

本文介绍了在Nuxt.js项目中如何进行工具类库的封装，包括持久化存储、事件通信和常用工具函数。同时，文章探讨了团队协作中的Git管理、组件规范和代码审查(CR)。分享了动态部署使用pm2的方法以及Git分支开发流程，强调了代码质量和注释的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

目录结构

常用工具类封装
1.1 持久化存储方案
1.2 事件巴士(Event Bus)
1.3 常用的工具类函数
1.4 如何批量导出
部署说明
2.1 静态部署(generate)
2.2 动态部署pm2简易实现
2.3 自定义集群(ecosystem)
团队协同
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
   */
  getStor