Vue项目初始化实用功能总结（三）

请教我编程

于 2024-07-23 09:31:55 发布

阅读量594

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_52932975/article/details/140608761

版权

文章内容概述

主要包括本人工作过程中大佬所写的项目中个人认为较为实用的技术进行总结（不涉及项目源代码，仅为官方文档或自行编写的参考代码），主要包括：

自定义指令directive;
自定义插件，并使用Vue.use()使用;
localforage实现类似于本地存储;
require.context实现Vue项目工程自动化;
i18n插件实现项目中英文切换;

一、自定义指令

请看：Vue项目初始化实用功能总结（一）

二、自定义插件

请看：Vue项目初始化实用功能总结（二）

三、 LocalForage

即答

localforage是什么？
答：是一个开源JavaScript库，提供统一的API供用户执行CRUD等操作。
localforage与localStorage有什么区别？
答：localforage基于 IndexedDB、WebSQL、localStorage 等浏览器本地存储机制，通过优雅降级的策略，兼容不支持indexDB或者WebSQL的浏览器。（不支持indexDB或者WebSQL的浏览器则使用localStorage进行存储）
localforage有什么特点？
答：其一，异步操作，支持 async 操作；其二，支持存储多种数据，包括且不限于二进制数据、数组、对象等（不等同于localStorage将对象和数组序列化为字符串后的存储，localforage是直接存储）；其三，自带优雅降级策略与简洁的API操作；其四，支持跨域数据的共享。

LocalForage安装及使用

// 两种安装方式
// npm
npm install localforage
// yarn 
yarn add localforage

// import直接引入即可
import localforage from 'localforage';

localForage常用API

初始化 localforage.config 配置localForage的API，在调用localForage之前必须先调用。

localforage.config({
  driver: localforage.LOCALSTORAGE, // 指定使用的存储引擎，此处为 localStorage
  // 可以为数组，为数组时表示驱动优先级，如下：
  // driver: [localforage.WEBSQL,
  //          localforage.INDEXEDDB,
  //          localforage.LOCALSTORAGE],
  name: 'localDemo', // 存储数据库的名称，默认为 localforage ，非必填字段
  version: 1.0, // 数据库版本号，后续升级时需要使用此字段
  storeName: 'objectDemo', // 存储对象的仓库名称
  size: '100000', // 存储数据库的大小，单位为字节，仅用于WebSQL，默认值：4980736（4.75M）
});

1. 存储数据
存储数据的API为 localforage.setItem(key, value) ， localForage 可以使用promise，因此，在存储数据时有三种使用方式：

// 使用 then 和 catch 处理
localforage.setItem('userInfo', { userName: 'zhangsan', password: 1234 }).then(function (value) {
    // 数据存储成功的回调函数
    console.log(value);
}).catch(function(err) {
    // 错误捕获
    console.log(err);
});

// async 和 await 将promise返回值赋值给一个变量
// try catch 用于错误捕获，便于排查存储失败时的报错
try {
    const value = await localforage.getItem('userInfo');
    console.log(value);
} catch (err) {
    console.log(err);
}

// 最原始的方式，使用 localForage 函数的第三个参数作为回调函数
localForage.setItem('userInfo', { userName: 'zhangsan', password: 1234 } , function(err, result) {
  if (err) {
    console.error('Error:', err);
  } else {
    console.log('Successfully:', result);
  }
});

读取数据、移除数据、清空等操作都有如上几种方式，后续将仅用 then catch 方式介绍
2. 读取数据
读取数据的API为 localforage.getItem(key) 参考代码如下：

localforage.getItem('userInfo')
  .then(value => console.log('Value:', value))
  .catch(error => console.log('Error', error));

( async await 与回调函数使用方式同上)

3. 删除数据
删除某条数据的API为 localforage.removeItem(key) 参考代码如下：

localforage.removeItem('userInfo')
  .then(() => console.log('Successfully'))
  .catch(error => console.log('Error', error));

4. 清空存储
localforage提供了一个API清空整个存储的数据库（慎用），localforage.clear() 参考代码如下：

localforage.clear()
  .then(() => console.log('Successfully'))
  .catch(error => console.log('Error', error));

localForage特殊API

相对于localStorage，localForage额外提供了一些特殊的API。

1. length()

localforage.length()用于获取数据库当前存储的数据的长度，参考代码如下：

localforage.length().then(function(num) {
    // 输出数据库的长度
    console.log(num);
}).catch(function(err) {
    // 错误捕获
    console.log(err);
});

2. keys()

keys 方法可以获取localforage中所有键名组成的数组，（键名：在使用localforage.setItem()时，存储数据传入发key值即为那一条数据的键名），参考代码如下：

localforage.keys().then(function(keys) {
    // 所有的键值对中的键名组成的数组
    console.log(keys);
}).catch(function(err) {
    // 错误捕获
    console.log(err);
});

3. iterate()

iterate()会对存储数据库中每一条数据进行遍历，通过一个回调函数迭代所有的键值对（一个键值对即为存储数据库中的一条数据，即localforage.setItem()存储的一条数据），参考代码如下：

localforage.iterate(function(value, key, index) {
    // 此回调函数将迭代 localforage 中的每一条数据
    console.log([key, value, index]);
}).then(function() {
    console.log('Iteration has completed');
}).catch(function(err) {
    // 错误捕获
    console.log(err);
});

4. setDriver()

setDriver()用于设置存储数据库的驱动，此API如果需要调用，需要设置在所有操作数据的API（如localforage.setItem()等）之前，参考代码如下：

// 强制设置 localStorage 为数据存储的驱动
localforage.setDriver(localforage.LOCALSTORAGE);
// 可以为数组，为数组时表示驱动优先级，如下，优先选择WebSQL作为数据存储的方式
localforage.setDriver([localforage.WEBSQL, localforage.INDEXEDDB]);