之前的範例，我們都是直接在 vuex 的 state 中把資料設計好，

然後練習 vuex 的流程與操作。

在專案中，資料的部分可能是向後端 server 取得，

接下來我們會使用 ajax 介接 API 來取得資料。

ajax

在過去 Vue 會推薦使用 vue-resource 這個套件來協助我們調用 ajax

那麼，在 Vue 框架中還有什麼合適的 ajax 套件推薦呢？

這點 Vue 作者 Evan You 在這篇部落格有說明：Retiring vue-resource

文章大意：

1. vue-resource 退出官方建議使用
   • 因為有很多第三方資源可以達到目的。
   • 降低維護成本，專心維護 vue 與相關套件
2. vue-resource 被棄用了嗎?
   • 沒有，只是不再官方建議中，未來將移到 pagekit/vue-resource 下。
3. 我改停止使用嗎? QAQ
   • 不！如果你用的得心應手的話，請繼續使用。
4. 不然我應該用什麼去 call ajax ?
   • 你開心就好 (誤 :P
   • 你可以去看看 Axios
   • 最熟悉的 $.ajax 也可以完成這個任務。
   • 也可以簡單的使用新標準 fetch API
5. Axios 無痛轉移技巧

也就是說在 Vue 中使用 ajax 的套件沒有限定，也不需要特別包裝，更不會發生衝突之類的情形。

任何你用得習慣的套件都可以繼續在 Vue 裡面使用囉。

那麼我們知道 ajax 怎麼使用後，應該想問，怎麼樣在元件觸發呢？

比如：

1. 我們如何在切換到頁面的時候觸發？
2. 如何在某個元件被載入到頁面的時候，去呼叫 API？
3. ajax 的資料如何存到 vuex 裡面？

因此，我們需要知道元件的生命週期。

Vue Lifecycle Hooks

更多.. Vue Lifecycle Hooks

官方精美流程圖：

所有紅色匡的部分都是 Vue 包裝好在每個環節中的 Hook

開發者可以根據需求，來使用，

比如：我們以前會使用 document.ready 或 $(document).ready() 這些 Hook

在觸發 ready 後執行初始化與 ajax 向後端 server 溝通。

created

對應到 Vue 生命週期，

我們可以在 page component 的 created Hook 發出 ajax 請求，

因為此時，data 已經建立了， success 的資料，你可能會塞在 data 與 UI 做雙向綁定。

data() {
  return {
    // 3. data 與 UI 雙向綁定
    datalist: []
  }
},
created() {
  // 1. 元件 created 時候 call API
  fetch('https://www.aws.myserver/get/userinfo', { method: 'GET'})
  .then((response) {
    // 2. success 資料儲存在 data
    this.datalist = response.json();
  })
  .then(error => {
    console.log(error);
  });
},

套用 vuex 流程：

還記得 vuex 流程中誰負責處理非同步事件嗎？ action !

vue

created () {
  // 1. 呼叫 api action
  this.$store.dispatch('actionAJAXexample');
},
computed: mapGetters({
  // 6. 等待通知.. 調用 getter function 取得 state
  datalist: 'getDatalist',
}),

vuex

const state = {
  // 5. state 改變，通知 UI 更新
  datalist: [],
}
const getter = {
  // 7. 取得 state
  getDataList = state => state.datalist
}
const actions = {
  actionAJAXexample ({ commit }) {
    // 2. action 發出 ajax
    fetch('https://www.aws.myserver/get/userinfo', { method: 'GET'})
    .then((response) {
	  // 3. success 後把資料丟給 mutation
      commit(types.MY_API_SUCCESS, response.json());
    })
    .then(error => {
      console.log(error);
    });
  }
}

const mutations = {
  [types.MY_API_SUCCESS] (state, data) {
    // 4. 收到資料改變 state
    state.datalist = data;
  },
}

mounted

此時 HTML 已經生成，如果要操控 DOM 如 JQuery 可以在這的時間點觸發。

updated

這個我們比較常用在 component 裡面，比如：父層資料更新的時候會觸發這個 Hook

到這邊介紹常用的 3 個 Hook

剩下的 Hook 目前還沒用到，想瞭解更多的朋友再到官網去研究囉。

更多.. Vue Lifecycle Hooks

github 完整範例：

實作小範例入門 Vue & Vuex 2.0 - github 完整範例

使用 git checkout 切換每天範例。