栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

38、vuex管理用户地址

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

38、vuex管理用户地址

前言:前面几章我们学习了一下vuex,学习总归是要学以致用,还是回到地址列表中,在第32章中我们使用的是localstorage来实现这方面的功能,但是效果很不好,所以本章我们用vuex来管理我们用户填写的地址。
GitHub:https://github.com/Ewall1106/mall

1、提交地址数据

(1)通过上一章vuex初探(五)的学习,我们知道在组件中可以直接commit提交mutations。

(2)所以我们在用户点击save事件的时候,将数据作为参数提交mutation

2、vuex仓库

(1)上文中在地址编辑页面提交了一个mutation,然后我们回到store文件夹中,首先应该定义一下state数据,这里我们的地址应该是一个数组。

(2)然后在mutations.js文件中,将用户commit提交的参数赋给这个address数组

3、获取state

(1)然后我们就可以去地址列表页面获取address数据了
(2)至于forEach函数无非是由于组件需要一个id用于设置默认勾选,所以遍历一下。

这样,我们就在我们的商场项目中用vuex管理了用户的地址。

4、小结

然后完善一下编辑和删除的功能,我们的地址选择就完成了。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/240999.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号