actions 就是 Vuex 里「共用的 method」

有时候，需要 CRUD 以外的行为，後端有时会开专属的 API，有时候不会。
有时候在使用 API 时，前端也有一些「一定会一起执行的事」。

那麽，这些「杂项」就很适合写在 action 方便表现「系统的行为」

• 系统可以登入
• 系统可以登出
• 系统可以上传档案

POST /login

request body

{
  user: '',
  password: ''
}

response 200

{
  token: ''
}

POST /file

request header

{
  'Content-Type': 'multipart/form-data'
}

request body

form-data

{
  file: (binary)
}

response 200

{
  data: '/file/:file_path'
}

这些行为有时候可以写在 acitons。

实作 vuex

在 action 可以直接定义 login, logout, uploadFile 的动作。

应该还有其它的用途，但是我一时之间想不到。

  async login({ commit }, payload) {
    const res = await backendAPI.POST('/login', payload)
    commit('setToken', res.token)
    cookies.set('token', res.token)
  },
  logout({ commit }) {
    commit('setToken', '')
    cookies.clear()
    router.push('/')
  },
  async uploadFile({ commit }, file) {
    const res = await backendAPI.formDataPOST(`/file`, { file })
    return res.data
  }

这些和 CRUD 不一样的是，API 发送结束，并不是只有更新资料的 commit 而已。有时还有一些其它的事情要做。

列举一些其它可能会有特别在 actions 出现的实作。不过如果这些逻辑和画面有关，就有可能会在 component 上实作，而不是 actions

• logout 可能在 API 收到 403 时就要执行。
• uploadFile 可能会配合其它的功能使用。
• login 需要储存 cookie

明天来实作在一个 actions 里做多个个非同步行为。