飛入購物車的動畫

• 步驟:
  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