课程名称:Vue3 + TS仿知乎专栏企业级项目
课程章节:第7章
主讲老师:张轩
今天的课程是vuex结合axios请求后端真实接口的深入使用。
介绍了RESTful API的概念,使用Swagger API的方法,然后结合自己测icode来使用后端的数据,可以看出老师在课程背后准备了很多东西,并且慕课网平台也在持续优化迭代他们的教学服务。
使用axios和vuex的交互复杂起来了,主要是axios数据拦截,请求过程中有loading的效果,返回数据之后使用commit把数据更新,通过computed的方式页面显示返回的数据。
import App from './App.vue' axios.defaults.baseURL = 'http://localhost:7001/api/' axios.interceptors.request.use(config => { store.commit('setLoading', true) return config }) axios.interceptors.response.use(config => { store.commit('setLoading', false) return config }) const app = createApp(App) app.use(router) app.use(store)
API的请求如果是权限相关的数据,需要使用token在请求中携带上去,在本地需要维护一份数据,token存在的时候主动去请求数据使用的onMounted.
温习了swagger, axios 结合vuex的使用,请求拦截然后数据更新,算是比较简单的内容。