课程名称：2022全面升级. Vue3 + TS 仿知乎专栏企业级项目

课程章节： 7-10 使用axios拦截器添加loading效果

主讲老师：张轩

课程内容：

针对没一个请求增加loading的效果

课程收获：

由于上节课对于多个actions进行了一个封装，封装如下：

const getAndCommit = async (url: string, mutationName: string, commit: Commit) => {

const { data } = await axios.get(url);

commit(mutationName, data);

};

原来actions方法里面的代码进行一个简化，现在只需要调用getAndCommit方法就可以，第一个参数为请求url，第二个参数为需要触发的mutations，第三个参数为commit。

此时需要增加全局的loading的效果，在mutation里面创建一个setLoading的方法，那么直接可以加载到请求前loading为true，commit之后loading为false。最后在页面上判断这个loading值就可以