解读开源代码 vueMinishop ，来看一下它是如何实现添加收货地址（配送地址）的。
vueMinishop 项目大家可以下载源码来研究下
用户收货地址管理的页面是 AddressList.vue
页面显示部分，使用的 vant ，只需要几行代码搞定：
<van-address-list
:list="addressList"
:switchable="topay == '1'"
@add="onAdd"
@select="selectItem"
>
<template #item-bottom="item">
<van-button type="danger" size="mini" round @click="deleteAddress(item)">删除</van-button>
</template>
</van-address-list>
数据管理直接使用 “api工厂” 的前端大中台，这样子自己也不要去开发接口和后台了，连服务器都省了。 直接调用SDK操作数据即可：
async getAddressList() {
const res = await this.$wxapi.queryAddress(getToken())
if (res.code === 700) {
this.$toast('暂无收货地址')
this.addressList = []
return
}
if (res.code === 0) {
this.addressList = res.data
this.addressList.forEach(ele => {
ele.name = ele.linkMan
ele.tel = ele.mobile
})
}
},
删除收货地址记录：
async deleteAddress(item) {
const res = await this.$wxapi.deleteAddress(getToken(), item.id)
if (res.code === 0) {
this.$toast('删除成功')
this.getAddressList()
} else {
this.$toast(res.msg)
}
},
this.$wxapi 就是 "api工厂" 的 SDK，安装使用教程可以看：
