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

前言：之前写了一个菜市场订单配送的项目，刚开始用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'
});
})

文件目录结构：

—src

—-components

——-pages

————origin.vue

—-config

————fetch.js

————mutil.js

—-router

—-service

————getData.js

目录：config/fetch.js

代码：

import axios from 'axios'
/*
* 获取数据 或者post 数据
*/
let basicUrl = 'http:/xxx/';//根地址
export const fetchData = (url = '', data = {},method = 'GET') => {
method = method.toUpperCase();//将字符串转换为大写
url = basicUrl + url;
if(method == 'GET'){
//解析data = {} 里面的参数
let dataStr = '';
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&';
})

if (dataStr !== '') {
dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
url = url + '?' + dataStr;
}
//尝试从远程获取数据
try {
//异步操作
return new Promise((resolve,reject)=>{
axios.get(url)
.then(response =>{
const responseData = response.data;
resolve(responseData);
})
})
} catch (error) {
throw new Error(error)
}
}
}

然后我们现在在getData.js里面统一写获取数据的函数，比如我要获取页面的订单最大号和最小号

目录：service/getData.js

代码截图：[看起来好看一点]



截图里的代码：[便于复制]

export const getMaxandMinpage =()=> fetchData('/logistics/originalorder/getmaxminid.do', {

});

定义了这个方法之后我们在origin.vue里面调用这个方法

1.首先引入这个函数方法

2. 方法里定义 这个方法[async 异步]

3. 挂载的时候使用this.initData()

代码截图：







代码：

import {getMaxandMinpage} from '@/service/getData'

mounted(){
this.initData()
}
methods(){
async initData(){
//获取最大最小id
let ids  = await getMaxandMinpage();
this.maxid = ids.MAXID;
this.minid = ids.MINID;
}
}

2.总结

总结：这样的好处是什么呢。就是方法公用，比如我销售单需要获取最大最小id，我同样调用这个方法即可

省掉的代码： 获取数据的部分 + 具体函数的部分

不足： 获取到的数据我还是得每次都要改一下。例如：

this.maxid = ids.MAXID;
this.minid = ids.MINID;

抛砖引玉：

那么怎么改进呢？

接下来我希望使用类的方法，比如调用p.getMaxandMinpage()

只需要写这一行，就可以实现maxid和minid的变化。

即使用一句话完全代替以下所有代码



别看这个只替代了这么一点点代码，看样子每个页面我麻烦点自己写忍忍不也就过去了嘛。

可是，盆友，如果有60+张页面都是这样的呢，你可能会说用vue组件嘛，但是。。如果页面的大致构造一样但是有一些布局之类不一样这种情况呢？

emm可能我举的栗子有点失败，反正就是有很多这种页面，大同小异，且不能一概而论之提为一个vue文件的那种，你该怎么办？

再回头看看，我每个页面只需要p.getMaxandMinpage() biu~一下就可以，岂不是很有诱惑？很有冲劲去研究？

嘿嘿那么请不用出门直接左转 看我的下个笔记！