购物车案例--分模块存储数据，发送请求数据渲染，底部总计数量和价格

shift+鼠标右键，打开powershell，新建项目 

自定义 

只有一个页面，不涉及路由，勾选vuex,css,babel

 

 

无需保存预设

回车项目开始创建 

 

项目用vscode打开 

将src里的内容全部清空

将第七天的课程准备代码复制粘贴到src中 

 

刷新页面，可看到购物车案例

 vuex分模块存储数据

 

新建模块并挂载。新建modules文件夹，该文件夹下新建cart.js模块。

 

生成后端接口

全局安装json-server 

新建db文件夹（用于存放数据源），将准备好的 index.json（在第七天课程中有） 放到文件夹中

 

提供数组包对象的格式，json-server就能基于这些数据提供增删改查全套结果
注意：json格式 ”键“必须用双引号引起来

index.json处打开powershell 

 
 

可以看到有两个接口了 ，启动index.json的窗口不能关，否则接口访问不了

请求获取数据存入vuex，映射渲染

因为以前安装的esLint版本与axios版本冲突导致axios安装不了，无妨 ，--force强制安装 。安装完成axios之后再启动一次serve

 

 在App.vue的created中已进入页面就调用actions执行异步请求数据，actions调用mutations将获取的数据写入到list中

获取数据之后进行渲染

• 用辅助函数获取 cart.js中的数据 list,然后v-for进行渲染
• 在父组件中定义的子组件标签通过 ：item自定义属性，将 父组件中访问的数据 传递到子组件，并在子组件进行接收渲染

 

打开页面检查，打开vue调试工具，找 list中各个对象的属性，以便进行渲染 

大的渲染在App.vue中，也就是有几个大块，细节渲染是每个大块里边

 

 修改数量

前端数据通过mutations来修改，后端 index.json中的数据通过发请求来修改（都是在actions中，一个提交更新，一个请求更新）

 通过注册点击事件向actions的updateCountAsync方法中传递 id和 实际参数值，因为有两个参数，所以updateCountAsync方法通过对象来接收。

• 先是向接口发请求修改数据，传过来的 id 作为地址一部分发送请求，然后将后端数据库中的count（此处必须是count,因为是要修改其值）值改为传过来的新值
• 接下来是向调用mutations中方法，更新本地数据（这里就不要求数据名一样了）

getters底部统计

• 基于state准备对应getters

• 使用mapGetters来映射使用