关于一个折磨了我快两天的不是bug的bug（低血压人士误入）

这是我在做一个todolist的时候遇到的…话不多说，上图

上面的代码的逻辑很简单，在输入框输入待办的任务task，由于双向绑定，将获得的task封装成一个taskObj对象（一条待办事项），然后通过触发自定义事件addTodo将这个taskObj对象传给父组件

之后由父组件向store提交commit…

以此来执行mutation里的ADDTODO方法，将新的待办事项插入到todolist中

嗯！一切看着都十分顺利，但是…

明明插入俩个不一样的待办事项并且他们的id是通过nanoid随机生成的，新的数据会覆盖掉之前插入的数据…对没错，女士们先生们就这个错误折磨我快两天（再次点题），我这两天心情极度低落，这只是一个简单的小demo却给我写成了这样。我一度怀疑我是不是白学了，我是不是应该注意进厂时机（说真的，我没有开玩笑）傅杰豪，你连这样一个错误都找不出来，你学伱抹的js、vue我把代码从头到尾看了不下十遍，一遍又一遍地调试，也是一点效果也没有…在床上无数次躺下，又坐起。当时我真的很想跳过这个demo，但是这个demo太重要了，它虽然小却“五脏俱全”，它涉及了vue的许多使用技巧，比如路由router、vuex、父子组件之间的数据传递等等。如果我跳过了，我后面怎么办？不是项目的demo就开始逃避不去攻克…光凭视频看的和那点自欺欺人的笔记就认为自己已经学了很多了？

就在刚刚这个问题被解决了。我一开始总以为是vue的问题（版本问题？新版本bug？store的问题？）。我从未考虑关于js那些最基本的问题，仔细看看第一张截图，我在蓝色方框里定义了一个封装task的对象taskObj，是定义在commit方法之外的。这就意味着每次调用commit方法，我都会使用这一个对象，而且是反复使用（相当于一个全局变量）。因此…

//插入第一条task，它的唯一id 
taskObj.id = nanoid()
//插入第二条task，它的唯一id 
taskObj.id = nanoid()

第二次的id会覆盖掉第一次的id，甚至其他属性…

解决方法就是

将这个第一张截图中的蓝色区域框的代码移到绿色框里，另外taskObj只是单纯用来封装task，因此不需要设置成响应式数据（我刚刚发现我这样写也不对…），直接改成普通对象就好了…

唉，基础不牢，地动山摇。说我书币吧，这个错误我又解决了，说我聪明吧，我还能被这个问题折磨两天…不管怎么说，能睡个好觉了…反面教材就是我，fran就是反面教材…