本文共 2368 字，大约阅读时间需要 7 分钟。
昨天的博客中总结了后端响应结果的包装Response(meta, data)。今天就简单谈谈博主在项目开发过程中的是如何借助于Vue.js的特性构造数据缓存区的。
鉴于煤矿井下精确人员定位系统的运行复杂性，就不再使用项目代码来做展示。这里，就通过编写一个简易的project demo进行展示Vue构造数据缓存区的便捷使用。
1、软件准备
请在切入正题之前，保证自己的电脑上装好了如下软件：
（1）node.js 6.9.5（会自动安装npm）
（2）vue 2.x , vue-cli（如果vue 2.x安装不成功，可以直接安装vue-cli，会自动安装依赖vue 2.x）
（3）Atom或者Sublime Text编辑器（用于前段代码的编写）
（4）JDK 1.8，Tomcat 8.x, Eclipse（用于运行后端代码）
2、资源准备
编写JavaScript实现数据的深拷贝的工具方法。
extends.js文件
/** * 深拷贝实现的继承:实现真正意义上的数组和对象的拷贝 * @param p 要继承的类 * @returns {___anonymous398_399} */export function deepCopy(p) { var F = (p.constructor === Array) ? [] : {}; for(var i in p) { if((typeof p[i]).toString.toLowerCase === "object") { F[i] = deepCopy(p[i]); } else { F[i] = p[i]; } } F.uber = p; return F;}; 3、正式开工
（1）在自己的workspace目录下，打开terminal工具（或者windows下的cmd），通过vue init webpack vuecachepro命令创建项目
（2）通过Atom或者Sublime Text编辑器打开项目vuecachepro，其目录结构如下：
（3）把上述准备的资源文件extends.js文件拷贝到src/assets目录下
（4）打开src/components/Hello.vue文件，作如下修改：
（5）当前目录结构为：
name age gender telephone { { person.name }} { { person.age }} { { person.sex }} { { person.telephone }}
（6）在Terminal或者windows下的cmd工具，切换到当前项目的目录下，执行npm install命令，安装包依赖，然后再执行npm run dev运行项目，在浏览器中:http://localhost:8080/即可看到如下页面：
进行相应操作即可。
4、总结
如何构造Vue数据缓存区，减少请求后端获取数据次数？
1、首先需要准备extends.js文件，其是为了解决操作Vue数据缓存区数据时会产生的联动性
2、需要在Vue数据区域作如下操作：
3、使用过程中一定要记得通过extends.js文件中的deepCopy方法进行操作数据
findPersonByTelephone () { let self = this; let personList = self.personListCache.personList; for (let i = 0; i < personList.length; i++) { if (personList[i].telephone == self.telephone) { // 一定要记得使用deepCopy一下person,而不要直接操作person的数据，不然会产生级联修改效应 self.person = deepCopy(personList[i]); delete self.person.uber; self.telephone = ''; break; } } }, 尤其是针对页面表格中的记录进行选取，然后再二级页面—模态框中进行增删改查操作时，极易产生数据联动性。所以有如此情况时一定要借助于deepCopy方法。
博主实在限于源代码的不可开放性。所以请各位见谅，只能通过这个简陋的project进行介绍Vue构造数据缓存区。
转载地址：https://buildupchao.blog.csdn.net/article/details/77466712 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！
发表评论
最新留言
关于作者
