Vue完成完整购物车以及对模块化开发的一些理解

在vue的模块化开发环境下，费了一些力气终于完成一个完整的购物车，期间是各种bug，让人很头疼，不过最终还是坚持完成了。发现以前在一个页面写程序在逻辑比较复杂代码比较多的情况下的确很让人头疼，而模块化开发把各个模块分开，各个细节让人一目了然，那么就分析下项目吧：

效果图如上

其实购物车的增删改逻辑基本是对数组的操作，这里就不过多赘述，一般是把axios请求来的对象数据放入一个数组，循环遍历渲染视图，点击（图一）的加入购物车把数组里的相应元素（一般是一个对象）传到购物车（图二），应为操作的功能比较多也相对有些复杂，所以我们选择使用vuex来传输数据以及更改数据，以下图片是我的store状态管理

刚开始的时候在store里我也是一直只创建一个初始index.js文件，state,mutations,actions全都放在一起，如果数据和修改较少还行，但是数据修改一多就很让人眼花缭乱了，所以这次尝试着把各个部分分开，那个阶段在哪个部分该做什么事，这样不管啥时候回来看这些代码都不会很晕，非常具有条理性，做完过后在回顾一下，才发现以前觉得很复杂的购物车也不过如此嘛哈哈哈哈哈！

再分析下这次做购物车遇到的难点：

先把store里的代码拿出来看看：（如下）

index.js：是store的默认入口文件

state.js:管理的数据

mutations（参数为(state,val（传入的修改的值）)）：里面进行数据修改

actions（参数为(store,val（传入的修改的值）)）:里面处理要修改数据的异步操作（后必须使用store.commit传入mutations进行值的修改）  // 所有异步处理必须放入actions

types：这个是用来管理所有外部通过dispatch和commit触发的传输数据的函数名（一般喜欢全大写）。 //这方法以前没咋用过 对于后期维护和代码可读性比较好

getters（参数(state)）：getters管理着所有依赖于state数据（这个项目是listData）的计算属性，可以通过mapGetters将数据引入到需要的地方：如下

getters数据的引入方式以及书写要多多注意，比较容易出错。

比较容易出错的地方特别多，比如types里的文件引号少了或不对，还有一些地方的文件忘记引入

一般的逻辑错误以及事件错误可以通过console.log给判断出来

好了分享这么多吧，晚安！