Vue学习之七(动画钩子,Vuex的使用与购物车的展示)

飞入购物车的动画

• 步骤:
  1、创建一个div，里面放一个img，把它放在加入购物车的位置，并且隐藏
  1.1 创建了div和img，写了必要的样式
  1.2 让div刚开始的时候，显示到加入购物车这个位置，那么就必须获取加入购物车的offset

  2、点击加入购物车，div显示出来，并且通过动画的方式移动到购物车的位置
      2.1、在被动画元素上，包裹transition内置的组件
      2.2、在transition上面注册动画进入阶段的动画钩子
      2.3、在动画钩子里面设置开始位置，刷新动画帧，设置结束位置
      2.4、点击了加入购物车按钮，需要显示被动画的元素，才能执行动画
  
  3、当我们的div移动到购物车位置之后，隐藏
      3.1，在afterEnter中把被动画的元素设置为隐藏
  

vuex 的使用

• 什么是vuex? 可理解为仓库,专门为vue.js开发的状态(数据)管理模式
• 跨组件通讯,多个组件都需要操作一个数据
• 使用: 1.安装; 2.导入,Vue.use();3.const store = new Vuex.Store()创建一个仓库对象; 4.注入到根实例,就有全局状态管理功能

• 核心概念:

  • state 仓库中的数据 buyCount:0
  • getter 仓库中获取数据 模板中{{this.$store.getters.getBuyCount}}
  • mutation 同步的方式操作数据的增删改

  • action 异步的方式操作数据的增删改

  • module 需要创建多个仓库时

购物车展示

1、拿着localStorage中的数据 {"90":5,"93":6}

2、遍历对象，把key（90，93）加入到临时数组中

3、调用临时数组的.join方法，组织好后台需要的参数

4、利用axios发送网络请求

5、数据回来之后，在渲染之前，给后台返回的buycount赋值

6、渲染

---

今日所安装的包

第一次安装:
    包名:vuex
    应用场景:在使用Vuex进行全局状态管理的时候
    安装方式:cnpm i vuex --save