閱讀前，建議可以參考Day1：閱讀指南＆為何選擇這個題目？

▌挑戰簡介

• 題目：三十天用Vue.jS打造一個網路商城

• 挑戰內容：以六角學院的「Vue出一個電商網站」＆大陸慕課網（IMOOC）的「Vue2.0+Node.js+MongoDB 全棧打造商城系統」（主要學架設MongoDB）作為主要教材嘗試在30天內打造網路商城

• 本篇性質：純粹學習進度的紀錄，不會有詳細的教學或解釋，因此不適合認真閱讀

▌目標

• 1.獲取後端的產品資料（API）

▌獲取API

• 在products頁面下獲取API
• 創建一個 products: [] ，之後把資料裝進去
• vm.products = response.data.products 要用 vm
• methods不會馬上啟用
• 要用created()啟動this.getproduct()

<script>
export default {
  data() {
    return {
      products: []
    };
  },
  methods: {
    getproduct() {
      const api = `${process.env.APIPATH}/api/${
        process.env.CUSTOMPATH
      }/products`;
      const vm = this;
      this.$http.get(api).then(response => {
        console.log(response.data.products);
        vm.products = response.data.products;
      });
    }
  },
  created() {
    this.getproduct();
  }
};
</script>