Vue类重构代码——01 准备：提取工具类方法

最新推荐文章于 2024-07-11 10:10:46 发布

young_Emily

最新推荐文章于 2024-07-11 10:10:46 发布

阅读量1.6k

点赞数

分类专栏： ----------Vue 代码优化思考文章标签：重构 vue 类

本文链接：https://blog.csdn.net/young_Emily/article/details/78522472

版权

本文探讨了在Vue项目中如何通过重构提高代码复用性，特别是从组件中抽取公共的获取数据方法。作者分享了如何将数据获取功能统一到单独的服务文件中，以减少重复代码，并介绍了这样做带来的好处和不足。最后，提出了使用类方法进一步优化的可能性，以应对多个类似但不完全相同的页面场景。

摘要由CSDN通过智能技术生成

前言：之前写了一个菜市场订单配送的项目，刚开始用jquery写的，后来又用了vue重写相同的内容，发现和jquery比起来，以数据为驱动的vue写同样的东西真的要简单方便快捷很多。关于这个项目jquery踩的坑及转换为vue写较jquery比较或vue遇到的难点，我之后会把笔记补上(ง •̀_•́)ง

正文前言：虽然vue相较jQuery写同个项目代码量缩减了很多，但是也有个很糟心的点就是，代码复用性不高。关于菜市场订单的页面很多页都是换汤不换药的，然而我们每个页面却在写很多本来可以公用的东西

注意：要想代码量急剧下降，不是简单地将一些方法提为共有的函数那么简单

由上总结：将订单页面抽象为类的想法应运而生 Loading……

1.正文

1.1 抽取获取数据的方法 [get post ]

如下，页面有很多要包含获取数据的函数，每个函数都要使用这段代码。因此考虑提取为一个方法
代码：

axios.post('http:/xxx/verify.do', qs.stringify({
  ID: this.curid}))
.then(response => {
    this.isVerify = 1;
    this.$message({
        message: '审核成功',
        type: 'success'
    });
})