前言
以前我一直是没想到这两个东西是可以联系起来的。因为一般来说异步请求数据都是放在 mounted 里，等拿到数据之后再去更新 Vuex 里的数据。能用吗？能用。好用吗？还可以。但是今天我看到 django-vue-template 的代码时感觉以前的方式真的不太优美。
以前的方法
首先在 mounted 里去请求：
mounted() {
// 先发请求
this.$axios.get('/users')
.then((response) => {
this.$store.commit('getUsers', users)
})
}
好像没机会用到 Action 呀，Mutation 就搞完了。
更优雅的方法
上面的 Github 给了一个更优雅的方法，直接将异步请求封装好。
初始化
首先在 api.js 里初始化 axios，这样每次就不用再写一遍请求头了，或者别的配置信息。
// api.js
export default axios.create({
baseURL: '/api',
timeout: 5000,
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': Cookies.get('csrftoken')
}
})
暴露接口
然后在 services 文件夹下暴露一个 API 接口。这里相当于做了中间件，将 response.data 传递到下一个 Promise 里，并返回这个 Promise，调用的时候就可以直接获取 response.data 了。
// usersService.js
export default {
fetchUsers() {
return api.get(`users/`)
.then(response => response.data)
}
}
调用
关键是怎么去调用，还是在 mounted 里直接调用？本质上是的，但是这个 Github 将它写在了 Vuex 的 store 里。
// /store/user.js
const state = {
users: []
}
const getters = {
messages: state => {
return state.users
}
}
const mutations = {
setUsers (state, users) {
state.users= users
}
}
const actions = {
getUsers ({ commit }) {
userService.fetchUsers()
.then(users => {
commit('setUsers', users)
})
}
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}
这样一来就用到了 Vuex 的 actions 了。
mounted
最后在 mounted 里去 dispatch 这个 action 就可以了。
mounted() {
this.$store.dispatch('users/getUsers')
}
总结
总结一下流程。
- 初始化 axios
- 暴露 API
- mounted 分发 action
- 调用 userService 发异步请求
- 获取结果后 commit mutations 改变 store 里的数据
可能有人说搞那么复杂，原来就几句，到你这变了几十行。如果是小项目当然搞太复杂了，过早优化是万恶之源，所以当 API 很少项目不大的时候确实以前的写法很方便。但是项目一大，API 剧增，又要用到 Vuex 那第二种是明显更优雅一点的。同时你不太需要关心向哪个 API 发请求，你只需要知道分发了哪个 action 就可以了。
