vuex 使用mapState之后如何获取节点

Question

computed:{
   ...mapState({
       cates:(state)=>state.DetailList.cates,
       keyWords:(state)=>state.DetailList.keyWords,
       itemList:(state)=>state.DetailList.promotedList,
       slidingWords:(state)=>state.DetailList.slidingWords,
       mainItem:(state)=>state.DetailList.mainItem,//这里获取数据
       dImageList:(state)=>state.DetailList.dImageList
   })
},

created(){
    let self=this;
   self.$nextTick(()=>{
           let bannerBox = document.getElementById('slider-cont');//这里无法获取到ID
           bannerBox.addEventListener("touchstart",(e)=>{
               self.startX = e.touches[0].clientX;
               self.startY = e.touches[0].clientY;
           });
           bannerBox.addEventListener("touchmove", self.touchPanMove);
           bannerBox.addEventListener("touchend",  self.touchPanEnd);
   });
   //绑定touch

},

因为在最外层有加

<div v-if="mainItem"></div>

Answer 1

fishenal 2017-04-02 19:41:18

感觉你的问题跟maspState无关，跟v-if的状态有关，created的时候 v-if mainItem这个元素是不是被删掉了。

还有建议尽量不在js里获取dom，框架已经提供了很多方法，如果是移动端事件可以去搜索相关的事件库来扩展。

你这相当于还是用jquery的思维来用vue，没用到vue的便捷。

Answer 2

提问者 Eden_frontend 2017-04-05 11:31:45

如果把v-if改成v-show 那

下面{{mainItem.price}}就会报错的。因为数据都没取回来就显示了

• fishenal #1

  这你得到mainItem哪里赋值那块去找，mainItem是异步数据，那computed里就要用getter，mapGetters，
  不用 nextTick，在mounted阶段获取dom
  为什么要用ref呢，直接在html里写v-on不行吗

Answer 3

提问者 Eden_frontend 2017-04-02 21:28:11

使用ref获取后无法添加事件

Answer 4

提问者 Eden_frontend 2017-04-02 21:27:03

那能在教程里讲讲吗？

• fishenal #1

  最简单的你把v-if 改成v-show 试试，
  里面所有addEventListening的都可以改成 v-on绑定方法，但对移动端事件是否兼容，是否要引用第三方库，要试试