vuex项目中一些需要注意的点（坑）

vuex项目中一些需要注意的点（坑）

此文档长期持续更新，会在项目开发中遇到的一些值得注意的点慢慢添加

1、关于计算属性内写闭包函数

问题： 像我这样的前端菜鸟在用vue的使用经常犯的一个错误：因为对组件的定位不清晰，划分组件不够合理，数据流转做的不合理导致了一个问题就是我在使用计算属性想依赖其他数据计算返回得到一个新的状态或者新数据的时候，总是会存在需要给计算属性传参，再用这个参数去筛选判断的问题。虽然计算属性允许使用闭包的方式去接受传进来的参数，但是导致的结果就是使其变成一个闭包函数，从而浪费内存，造成内存泄漏（指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃）。

此处贴上错误代码：

		leftGroup(){  //分组数据中序号为奇数的左半边部分
            return function(i){
                return this.groupList[i].groups.map(function(item,index){
                    return item.groups.filter((item, i) => {
                        return i % 2 == 0
                    })
                })
            }
        },

此处是想要从班级的分组数据中按每个小组的小标筛选除下标为偶数的数据，返回新的数组

问题分析：

1. 首先明白组件的定义：组件是可复用的 Vue 实例（这是官网的定义），个人认为组件其实就是页面上一块一块的功能区，所以我们可以按页面的功能划分把页面抽离成一个一个的组件，最后进行页面组装和组件之间的数据流转，这样我们开发起来思路更清晰，定位修改bug也更方便，好处多多，自行体会
2. 怎么去写好组件：本着这么几点吧！一是明确组件的输入和输出，别人给什么，要给别人什么（别人引用该组件的页面或组件）；二是在项目中尽量不要把整个页面的数据传给页面上单个功能组件，列如给每个小组的组件传数据时，不要把整个班级的小组数据传进去，应该只传这个小组对应的数据。三是在组件内做组件内交互时，组件内本地数据本着越简单越好的原则，在往外返值时，返出去的值可以通过简单的数据由计算属性得到
3. 遇到在计算属性里写闭包的这种操作时，我们就需要对组件的划分和组件数据的流转再梳理一遍，一般都是由这两个问题造成的

上述事例代码的解决办法：检查发现是因为往当个班级组件内传入了所有班级的小组数据，所以点击的时候需要一个点击的班级下标 i 去筛选出点击的班级对应的小组数据。所以改成只给班级组件传入对应班级的小组数据，问题迎刃而解

贴代码：

	leftGroup(){  //分组数据中序号为奇数的左半边部分
                return classGroup.groups.map(function(item,index){
                    return item.groups.filter((item, i) => {
                        return i % 2 == 0
                    })
                })
        },