Vue小案例途中组件不显示

问题描述：

首先我在组件标签中添加v-for = "item in list"，这个时候出现了非常不可思议的一步，这个组件直接不显示了，然后我去浏览器F12控制台打开之后并没有发生任何的报错

解决方法以及解决思路

1首先我们可以分步去看这件事，我们添加了了一堆代码之后报错了，最好的是我们写一点测试一点在还不熟悉的时候，如果特别熟悉在一下写一堆代码，如果出错了，因为特别熟悉排查起来也是比较快的。

2回想一下之前没有添加v-for的时候还可以正常显示，这个时候我犯了一个致命的错误，当然我犯这个致命的错误也是有原因的，没有去分析问题，首先这个问题不就是list没有取到值么，只有list什么值都没有的情况下才会组件不显示，都没有值值循环什么，组件才会不显示，而我这个时候去考虑是不是组件父传子传输数据写错了，当然不是没有原因的因为，我这块不熟悉写的不自信。

3分析完毕之后我们开始解决问题，list没有值，那么我去控制台的vuex插件中查看到vuex中的list是有值的，也就是说从后端拿过来数据是没有问题的，那么就去我取值的时候出问题，那么我明明写了...mapState辅助函数，我倒想看看这个数据显示出来是什么，当我写了一个按钮，按钮里面this.$store.state.list后我看到了我从来没有看到过的数据，它竟然是有数据的但是数据不对，那么可以判断出来应该是...mapState辅助函数的位置这里出了一些问题。原来是mapState辅助函数的位置写到了data()里面，应该写到computed里面实时检测数据变化，好像这里面就可以想到别的只要不是本组件要做这种响应式数据好像就需要写到computed里面。这里肯定不是我说的这样，但是有时间了可以想一下。

另外还有一个问题

当时写了一个axios请求，虽然我并不理解patch请求方式，但是好像就是跟put差不多

 await axios.patch('http://localhost:3000/cart/' + payload.id, {
        count: payload.count
      })
context.commit('updateCount', payload)

第一次请求没有问题，正常修改，每把的第二次请求id就开始出问题，

将数据重置之后还是这个样子，第一次请求没有问题，第二次请求出现问题，出现问题是payload.id中id出现问题，这就让我百思不得其解，原来是下面的代码将数据中的id进行修改了。

通常第一次成功，第二次失败，那一定是代码写的有问题，百分之九十五，看整个代码的逻辑

总结

这两个错误的费时间的点在于没有好好的分析问题，另外都有是不报错的问题，运行时问题，这个时候分析问题显着更加的重要。