青橙优购

在 components 目录上鼠标右键，选择 新建组件，并填写组件相关的信息：（在cart.vue中使用）

渲染收货地址组件的基本结构：

在 data 中定义收货地址的信息对象：

使用 v-if 和 v-else 实现按需展示：

为 请选择收货地址+ 的 button 按钮绑定点击事件处理函数：

定义 chooseAddress 事件处理函数，调用小程序提供的 chooseAddress() API 实现选择收货地址的功能：

定义收货详细地址的计算属性：

渲染收货地址区域的数据：

在 store 目录中，创建用户相关的 vuex 模块，命名为 user.js：

在 store/store.js 模块中，导入并挂载 user.js 模块：

改造 address.vue 组件中的代码，使用 vuex 提供的 address 计算属性 替代 data 中定义的本地 address 对象：

修改 store/user.js 模块中的代码如下：

目的：为了提高代码的复用性，可以把收货的详细地址抽离为 getters，方便在多个页面和组件之间实现复用。

剪切 my-address.vue 组件中的 addstr 计算属性的代码，粘贴到 user.js 模块中，作为一个 getters 节点：（实际就是this换成state）

改造 my-address.vue 组件中的代码，通过 mapGetters 辅助函数，将 m_user 模块中的 addstr 映射到当前组件中使用：

问题说明：在 iPhone 设备上，当用户取消授权之后，再次点击选择收货地址按钮的时候，无法弹出授权的提示框！

导致问题的原因 - 用户取消授权后，再次点击 “选择收货地址” 按钮的时候：

解决问题的方案 - 修改 chooseAddress 方法中的代码，进一步完善用户没有授权时的 if 判断条件即可：

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 21天，点击查看活动详情