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();
},
複製代碼