Vue教程23：Vuex非同步Action

閱讀更多系列文章請訪問我的GitHub部落格，示例程式碼請訪問這裡。

該節教程程式碼可通過npm start執行devServer，在http://localhost:8080/#/index檢視效果

執行服務端請cd server，node server.js。

建立一個測試資料檔案user.txt

檔案內容為[{"id":3,"name":"lee","age":18,"online":true},{"id":5,"name":"zhangsan","age":22,"online":false},{"id":11,"name":"lisi","age":25,"online":true}]。 用於輸出一個user列表。 通過cd server，node server.js啟動伺服器，就可以在http://localhost:8081/user.txt訪問到它。

新增非同步Action

程式碼示例：/lesson23/src/store/index.js

由於Mutations不接受非同步函式，因此只能通過Actions來實現非同步請求。 在Actions中新增一個非同步Action：

actions: {
  async readUsers ({commit}) {
    let res = await fetch('http://localhost:8081/user.txt')
    let users = await res.json()

    commit('setUsers', users)
  }
},
複製程式碼

在Mutations中通過setUsers接收並更新users資料：

setUsers (state, users) {
  state.users = users
}
複製程式碼

發起非同步Action

程式碼示例：/lesson23/src/components/Index.vue

在生命週期created中，發起一個非同步Action獲取資料：

async created(){
  await this.readUsers();
},
複製程式碼