Vue小案例-购物车案例(知识点:json-server,vuex,axios,组件通信和数组方法find，reduce)

目录

// 前言

// json-server

// 购物车项目要求

// 请求获取数据

        // vuex模块创建

        // axios请求数据

// 修改vuex数据

// 访问vuex数据

// 组件通信(父组件传子组件)

// 修改数量事件和底部数量与金额

        //修改数量事件(find方法）

// 统计底部数量与金额(getters,reduce)

// 总结

---

// 前言

        小案例涉及知识点蛮多，日后需要时候方便找，也算一个巩固。

// json-server

        在后端还没有写好的时候，前端不可避免需要使用一些数据，我们又不太想要简单的动态数据，而是希望有一个可以完全模拟请求，修改的过程。json-server就是这样一个工具，我们只需要提供一个json文件就可以模拟出API接口，里面有全套的增删改查功能。

首先，先安装json-server

npm install json-server -g

接着在vue项目下创建一个db文件，将index.json放在该文件目录下

接着在该文件目录下通过终端控制台启动服务即可

json-server index.json

// 购物车项目要求

        请求获取数据存入vuex，映射渲染数据和利用数据进行计算(getters)

// 请求获取数据

        // vuex模块创建

        先在store下创建modules存放vuex的模块，记得要开启命名空间namespaced(别忘记了d！）

然后index.js下导入模块cart

        // axios请求数据

        先在项目文件下安装axios

npm install axios -save --legacy-peer-deps

接着导包axios，然后在actions中异步获取数据，在控制台打印看看。

data下的就是我们的数据

组件中的created钩子(不要漏d，而且钩子函数是有()括号的，而不是 : 冒号)利用dispatch在页面创建时渲染

// 修改vuex数据

现在获取到数据了，我们需要将获取到的数据利用mutations申请修改vuex中list数组的数据

// 访问vuex数据

接着就是请求vuex中的数据，利用辅助函数mapState，然后在组件中利用循环渲染

需要注意的是 ...mapState('cart', ['list’])，后面是传入一个数组，需要用单引号

// 组件通信(父组件传子组件)

父组件中的:item=“item”起到动态传参的作用

接着在子组件中利用props接收参数

item是一个对象类型(type: Object)，且必须传入(require: true)

接着就可以渲染数据了

// 修改数量事件和底部数量与金额

        //修改数量事件(find方法）

        技巧:加减按钮直接写在一个方法即可，只是传值不一样，加就传入1，减就传入-1

现在获取到对应的id和newCount了，我们需要修改后端数据库的值，还需要修改vuex中的值再重新渲染

先修改数据库中的

用vuex如果要传参数的话只能传入一个参数，所以我们直接传入一个对象进去，对象包含id和newCount

接着在cart中利用axios.patch更新count，要记得用``，因为要动态传id

await axios.patch(`API/${obj.jd}`, {需要修改的属性})

点击＋后数据库中的count修改

接下来继续修改vuex中的list对应的id的相关值就好

先明确我们要干嘛，我们需要利用mutations修改state中list对应id的count的值，所以我们需要两个参数，一个是id(找到list数组中的对应对象的id),一个是newCount(进行修改)

但是只能传入一个参数，所以我们传入数组，直接把传来的obj再传过去就好

利用数组函数find找到对应的id，然后再修改

// 统计底部数量与金额(getters,reduce)

统计，那么就需要用到getters(state的计算属性)

计算总数和总价格，利用reduce求和

数组.reduce( (sum, item) => sum + item, 0)  0是初始值，sum一定要写在前面，否则会undefined

最后在组件中利用辅助函数接收和渲染即可

// 总结

虽然这个小案例比较简单，但是设计的知识点还是蛮多，如json-server,vuex,axios，组件通信和一些数组的常用方法，非常利用巩固学习。