31、地址新增 — 定义数据结构与获取方式

前言：前两章我们讲了地址列表和地址填写两个页面的制作，这几章就是把上两章的内容打通，新增一条数据并在地址列表中展示，实现地址列表页与地址填写页的数据互通获取与编辑功能。 GitHub：https://github.com/Ewall1106/mall

1、地址的数据结构

根据对地址列表和地址填写所需要字段的分析，我们可以知道数据结构应该是这样：

• id： 每条地址的唯一标识
• name： 收货人姓名
• tel： 收货人手机号
• address：收货地址（这个应该是在地址填写页面的时候将详细地址和省市区拼接而来）
• addressDetail：用户填写的详细地址
• areaCodeL： 地区编码，通过省市区选择获取
• postalCode： 邮政编码
• idDefault： 是否为默认地址

地址的数据结构

2、新建一条地址

（1）让我们进入addressEdit.vue页面填写一条地址，ok，现在假设你已经填写完毕。 （2）这个时候我们点击保存按钮且应该为这个按钮添加一个save事件，通过官方文档可知，我们可以通过这个事件获取填写表单的内容。

截图来自vant官网

save获取用户所填写的内容

打印用户所填写的内容

（3）然后，应该将事件返回的数据变为我们开头说好的那种数据结构，所以我们定义一个data对象：

// 保存
onSave(e) {
  let data = {};
  data.name = e.name;
  data.tel = e.tel;
  data.address = e.province + e.city + e.county + e.addressDetail + "";
  data.addressDetail = e.addressDetail;
  data.areaCodeL = e.areaCode;
  data.postalCode = e.postalCode;
  data.isDefault = e.isDefault;

  console.log(data);
},

3、列表页面获取数据

（1）当在地址编辑页面编辑完成以后，如何在上一级的列表页面获取地址数据呢？我举例几种方法：

• 使用接口获取 当用户点击保存的时候，我们可以post请求向后台提交本条数据，然后当回退到地址列表页面的时候再次请求一遍接口获取数据，只是重复请求对体验不好；
• 使用本地存储localStorage 我们将这条数据保存起来，然后当进入到其他页面时再次从本地获取。
• 使用vuex。 使用vuex来管理状态当然是最好的选择了，所以下面几章专门讲讲vuex；后端现在还没写，就简单用本地存储localStorage来存储/获取数据。

4、小结

本章主要是定义了地址的一个数据结构然后就是添加了一个save事件，下章简单讲下localstorage的用法，并使用它存储/获取一下数据，毕竟localStorage本地存储在日常的项目构建中还是经常用到的一个知识点。 下下章说下大家期待的vuex