让程序码化为 API Doc

先写 API 文件。

可以使用mockAPI的服务取得一组 user 的 API。

因应需求写的 API 文件

GET /user

response 200

{
  "data": [
    {
      "createdAt": "2021-09-28T06:15:33.861Z",
      "name": "chris",
      "avatar": "https://fakeimg.pl/300/",
      "id": "1"
    },
    {
      "createdAt": "2021-09-28T08:06:09.227Z",
      "name": "Elizabeth Shields",
      "avatar": "https://cdn.fakercloud.com/avatars/russoedu_128.jpg",
      "id": "2"
    },
    {
      "createdAt": "2021-09-27T16:50:44.188Z",
      "name": "Everett Stokes",
      "avatar": "https://cdn.fakercloud.com/avatars/bobwassermann_128.jpg",
      "id": "3"
    }
  ]
}

GET /user/:id

response 200

{
  "data": {
    "createdAt": "2021-09-28T06:15:33.861Z",
    "name": "chris",
    "avatar": "https://fakeimg.pl/300/",
    "id": "1"
  }
}

POST /user

request body

{
  "name": "chris",
  "avatar": "https://fakeimg.pl/300/"
}

response 200

{
  "data": {
    "createdAt": "2021-09-28T01:16:41.617Z",
    "name": "chris",
    "avatar": "https://fakeimg.pl/300/",
    "id": "4"
  }
}

PUT /user/:id

request body

{
  "name": "chris",
  "avatar": "https://fakeimg.pl/300/"
}

response 200

{
  "data": {
    "createdAt": "2021-09-28T06:15:33.861Z",
    "name": "chris",
    "avatar": "https://fakeimg.pl/300/",
    "id": "1"
  }
}

DELETE /user/:id

response 200

{
  "data": {
    "createdAt": "2021-09-28T06:15:33.861Z",
    "name": "chris",
    "avatar": "https://fakeimg.pl/300/",
    "id": "1"
  }
}

用 actions 写 API 文件实作

前几天的 Vuex使用偏好 有说 action 可以写非同步行为，还有它的命名规则。在此就利用这些原则，配合上一篇的基础建设，在这里「将 API 文件写成程序码」，成为「程序码可以自我文件化」的一种体现。

@/store/actions.js

import backendAPI from '@/utility/backendAPI.js'

export default {
    async fetchUser ({ commit }, id) {
      const res = await backendAPI.GET(`/user/${id}`)
      commit('user', res.data)
    },
    async fetchUsers ({ commit }, id) {
      const res = await backendAPI.GET(`/user`)
      commit('users', res.data)
    },
    async createUser ({ commit }, { id, name, phone }) {
      await backendAPI.POST(`/user`, {
        name,
        avatar
      })
    },
    async updateUser ({ commit }, { id, name, phone }) {
      await backendAPI.PUT(`/user/${id}`, {
        name,
        avatar
      })
    },
    async deleteUser ({ commit }, id) {
      await backendAPI.DELETE(`/user/${id}`)
    },
  }

其中，这些部份，就如同你的 API Doc 在除错的时候，可以直接搜寻 path 并且对一下 method 和 param 有没有给错。这里和 API Doc 一样，API 会给错，都是 component 的问题了。

backendAPI.GET(`/user/${id}`)
backendAPI.GET(`/user`)
backendAPI.POST(`/user`, {
  name,
  avatar
})
backendAPI.PUT(`/user/${id}`, {
  name,
  avatar
})
backendAPI.DELETE(`/user/${id}`)

为了浏览器的 Network 固定在 action 取得

为了让在这里的 res (在 fetchUser、fetchUsers 有宣告) 就如同下图的样子，所以需要前一篇的处理 API 层次感之地基篇，让 response 吐出来的样子，和浏览器的 Network 看到的一样。

再看一下 Vuex 的图

目前我们实作了下面这一个部份

接下来，慢慢的将 Vuex 把这些东西都做好。