vue--收藏功能--检查排错

代码遇到问题，学会一步一步调试，排查问题，最简单的就是打印输出console.log(你想要打印的内容)；多问自己几个问题，思路就出来了，或许难倒你的不是逻辑思维能力差，而是你能不能静下心去问自己遇到了什么问题。

我挣扎了差不多一个星期，要做的功能就是为项目添加一个“收藏功能”，即点击心形变颜色。

第一个思路是：

<v-btn flat icon  @click="favoriteEgg(item.id)" v-if="currentEggId = item.id">
    <v-icon small>favorite</v-icon>
</v-btn>

当前点击图标的id是否与原本存在的id相等，则图标变红。失败告终

第二个思路是：
新建一个空数组用于测试，增加“添加id到数组”函数和“删除数组中的id”函数，
点击图标，触发点击事件，若id存在于数组中，则执行删除id操作，若不存在，就执行添加id操作

函数我也写了两个，后面发现可以合二为一。需要说明的是，添加删除函数以及数组，都定义存放在了Vuex中，所以，设置函数的时候，需要外面传入的值为item.id，我在点击事件传值时，已经用val形参代替了。合二为一的函数操作如下：

import Vuex from 'vuex'
Vue.use(Vuex)  //引入vuex
const store = new Vuex.Store({
	collectionId: []; //声明数组存放收藏的id
}
 CollectionId(state,val){
      for(let i = 0; i < state.collectionId.length; i++){
        if (parseInt(state.collectionId[i]) == val) {
          state.collectionId.splice(i, 1); //执行删除操作
          console.log("删除id后的数组："+JSON.stringify(state.collectionId))
          return;
          }
     }
        state.collectionId.push(val); //执行添加操作
        console.log("添加id后的数组："+JSON.stringify(state.collectionId))
    },

//在点击事件存在的组建中调用该方法
this.$store.commit("CollectionId", val);

如果能执行添加操作，不能执行删除操作，就单个调试删除操作，函数在哪写的，就在哪打印输出，做测试，随便在哪输出，当然是在函数里面输出；如果删除和添加操作逻辑上都没有错，最后考虑传的值是否正确了，有可能需要的是id，而你传的是索引。

检查方法1：检查是否遍历了for循环，可以在外部声明一个全局变量初始值为0，当循环结束后，这个变量加1，判断这个变量是0还是1就说明可以判定要不要继续执行下面的添加操作

CollectionId(state,val){
      // var temp; 声明一个全局变量
      // var temp = 0;
      for(let i=0; i< state.collectionId.length; i++){
        if (parseInt(state.collectionId[i]) == val) {
          state.collectionId.splice(i, 1);
          console.log("删除id后的数组："+JSON.stringify(state.collectionId))
          // ;将当前循环内容值返回
          return;
          }
          // if 用if判断当循环结束后，变量+1
          // if(temp == state.collectionId.length-1){
          //   temp += 1;
          //   console.log("temp="+temp)
          // }
     }
      // if temp - 1 --- arry no eggid --- 0 如果temp=1，说明正确执行了循环操作
      // if(temp ==1){
      //   // console.log("there is no eggId")
      //   console.log("如果temp=1,数组无id，执行for循环后的数组："+JSON.stringify(state.collectionId))
      // }else{
        state.collectionId.push(val);
        console.log("添加id后的数组："+JSON.stringify(state.collectionId))
      // }
    },

此时添加删除操作都已正常，检查方法2：接下来就是v-btn里面的v-if判断条件了，判断条件写好了，颜色变化才会正常。思路是:如果id在数组内，则变红，不在则取消变红。我出次写的判断条件是v-if="favoriteId.indexOf(item.id)"，检查该条件，需要在computed先定义一个favoriteId，再打印console.log(favoriteId.indexOf(item.id))，这样是会报错的，正确写法为：
检查方法3：方法在代码的注释中

favoriteId :function() {
      for(let item in this.marketEggs){ //因出现全红状态，所以在item.id原本存放的数组中遍历，检查数组中是否有元素
      //此处打印v-if条件，是判断自定义的数组里面是否有元素，所以favoriteId要换成从Vuex里面拿的自定义数组this.$store.state.collectionId
        console.log(this.$store.state.collectionId.indexOf(item.id))
        //检测indexOf是否为-1，发现v-if需要的是bool类型
        if(-1){
          return true
        }
      }   
      return this.$store.state.collectionId;
    }

因此，接上代码if(-1)，则修改v-if判断条件为v-if=“favoriteId.indexOf(item.id) === -1”,最后代码：

<v-btn flat icon  @click="favoriteEgg(item.id)" v-if="favoriteId.indexOf(item.id) ===-1">
    <v-icon small>favorite</v-icon>
</v-btn>
<v-btn flat icon color="pink" @click="favoriteEgg(item.id)" v-else>
    <v-icon small>favorite</v-icon>
</v-btn>

到此，收藏功能已实现。
问自己想实现什么很重要，问自己卡在哪了很重要，然后就是检查很重要，方法大概就是上面几种，最后一个，动手很重要！！！