前言：前两章我们讲了地址列表和地址填写两个页面的制作，这几章就是把上两章的内容打通，新增一条数据并在地址列表中展示，实现地址列表页与地址填写页的数据互通获取与编辑功能。
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
作者：Ewall_
链接：https://www.jianshu.com/p/ed72a5544d59
随时随地看视频
