今天学Vuex遇到的两个小坑

42次阅读

共计 653 个字符，预计需要花费 2 分钟才能阅读完成。

写影院搜索页面 , 忘记判断 mounted 中的影院数据 cinemasList 是请求得到 , 还是利用缓存的 , 导致我 mounted 中的 this.$store.state.cinemasList , 刷新搜索页面以后一直是空数组 (缓存被清空了 , 数据自然冒得咯) , 应该有个判断 :

// 防止刷新以后数据请求为空 , 因为不确定用户先进的 search 还是 cinema 页面
    if (this.$store.state.cinemasList.length === 0) {this.$store.dispatch('getCinemasAction')
    } else {console.log('使用缓存')
    }
  }

影院页面要显示前五个离我最近的推荐影院 , 利用计算属性

 computed: {
    // 取前五条数据 , 
    // 注意: 不能用 splice , 会影响原数组 cinemasList , 然后又引起计算属性变化 , 死循环
    cinemasContent () {return this.$store.state.cinemasList.slice(0, 5)
    }
  }

开始用的 splice 方法取前五条数据 , 报错 Unexpected side effect in "cinemasContent" computed property

原因如下 :

splice 有 ” 裁剪 ” 作用 , 会影响原数组 cinemasList , cinemasList 改变又引起 cinemasContent 重新计算 , 又影响了 cinemasList , 死循环 .

所以用 slice , 不影响原数组

(ps: 暂时没学到 getters , 所以用的 computed)

正文完