31、地址新增 — 定義資料結構與獲取方式

摘要： 前言：前兩章我們講了地址列表和地址填寫兩個頁面的製作，這幾章就是把上兩章的內容打通，新增一條資料並在地址列表中展示，實現地址列表頁與地址填寫頁的資料互通獲取與編輯功能。 GitHub： https://github.com/Ewall1106/mall 1、地址的資料結構 根據...

前言：前兩章我們講了地址列表和地址填寫兩個頁面的製作，這幾章就是把上兩章的內容打通，新增一條資料並在地址列表中展示，實現地址列表頁與地址填寫頁的資料互通獲取與編輯功能。

GitHub： ofollow,noindex">https://github.com/Ewall1106/mall

1、地址的資料結構

根據對地址列表和地址填寫所需要欄位的分析，我們可以知道資料結構應該是這樣：

id
name
tel
address
addressDetail
areaCodeL
postalCode
idDefault

2、新建一條地址

（1）讓我們進入 addressEdit.vue 頁面填寫一條地址，ok，現在假設你已經填寫完畢。

（2）這個時候我們點選 儲存 按鈕且應該為這個按鈕新增一個 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