智慧商城:购物车模块基本静态结构 + 构建vuex cart模块,获取数据存储(异步actions)
基本静态结构
静态结构直接 cv笔记中的内容 ,粘贴到 layout架子上的 cart组件中
给详情页底部的 首页 和 购物车 添加点击跳转事件
cart.vue中应用到的 van-Checkbox组件,进行该组件的引入注册
将数字框替换为之前封装好(两个+-按钮中间的1那个输入框)的组件CountBox
构建 vuex cart模块,获取数据存储
在store文件夹下新建 cart.js模块,存放 cart 组件数据
需要使用的话必须在store文件夹下的 index.js中挂载
如何验证挂载好了 :到vue 调试工具中可见
在 api 文件夹中新建 cart.js模块 封装请求方法
因为请求头内容上次已经在请求拦截器中封装好,所以这里不用再写请求头参数
想要在( vuex) store文件夹下modules文件夹下的 cart.js 中存储数据,请求回来的数据存储,则应在actions中,因为mutatios中主要处理同步,请求数据本身涉及到异步操作,所以必须写在actions中
注:要进行请求并存储数据,在api文件夹下的cart模块中将请求方法封装,然后在存储store文件夹下的modules文件夹下的cart模块中调用该方法进行请求打印,而不是将请求打印写在cart.vue组件中了
设置一个mutations方法 setCartList,第一个参数一定是state,第二个参数是actions方法中传递过来的值。
在actions方法getCartAction中将请求回来的数据解构,调用mutations中的方法setCartList,并传入需要修改成的新值
请求回来的数据是不包含复选框选中状态,是需要用户自动维护