vue-jingdong-实现购物车内部功能-（九）

1、vuex数据持久化

//数据持久化，每次调用mutations的时候都会触发这个函数
store.subscribe((mutations,state)=>{
  localStorage.setItem('cartarray',JSON.stringify(state.cartarray));
})
export default store

2、购物车动画实现思路

<div class="ball-wrap">
      <transition @before-enter="beforeEnter" @enter="enter" @afterEnter="afterEnter">
        <div class="ball" v-if="ball.show">
          <div class="inner">
            <i class="cubeic-add"></i>
          </div>
        </div>
      </transition>
    </div>

beforeEnter(el){
      //让小球移动到点击的位置
      //获取点击位置
      const dom = this.ball.el;
      //获取点击DOM的位置
      const rect=dom.getBoundingClientRect();
      const x = rect.left-window.innerWidth*0.7;//负值
      const y = -(window.innerHeight - rect.top);//负值
      console.log(x)
      console.log(y)
      el.style.display="block";
      el.style.transform = `translate3d(0,${y}px,0)`;
      const inner = el.querySelector('.inner');
      inner.style.transform = `translate3d(${y}px,0,0)`;
    },
    enter(el,done){
      //触发重绘
      document.body.offsetHeight
      //小球回到原点，就是购物车位置
      el.style.transform=`translate3d(0,0,0)`;
      const inner = el.querySelector('.inner');
      inner.style.transform=`translate3d(0,0,0)`;
      //过渡完成后执行的事件
      el.addEventListener('transtionend',done);
      
    },
    afterEnter(el){
      //结束隐藏小球
      this.ball.show = false;
      el.style.display ="none";
    }
  },