Vue学习之动画钩子,Vuex的使用与购物车的展示实例

飞入购物车的动画

步骤: 

1、创建一个p，里面放一个img，把它放在加入购物车的位置，并且隐藏 

1.1 创建了p和img，写了必要的样式 

1.2 让p刚开始的时候，显示到加入购物车这个位置，那么就必须获取加入购物车的offset

2、点击加入购物车，p显示出来，并且通过动画的方式移动到购物车的位置

    2.1、在被动画元素上，包裹transition内置的组件

    2.2、在transition上面注册动画进入阶段的动画钩子

    2.3、在动画钩子里面设置开始位置，刷新动画帧，设置结束位置

    2.4、点击了加入购物车按钮，需要显示被动画的元素，才能执行动画

3、当我们的p移动到购物车位置之后，隐藏

    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