之前我没有使用dva的时候,是通过根组件app.js和ajax封装里面拿到实例化的store,来确定loading是否显示;
ajax封装的方法里面通过
import store from '@/redux'
拿到store
并获取到dispatch
和loading
;ajax开始的时候通过
store.dispatch({type:'setLoading', {isLoading:true}})
来显示loading
效果,请求结束的时候通过store.dispatch({type:'setLoading', {isLoading:false}})
来取消loading
;
现在因为使用dva-cli生成的目录,我在index.js
里面的dva实例app可以拿到store,但是通过export default app
之后,在utils/request.js
里面import进来后显示app.js
为undefined。
现在我就想知道,全局loading效果,在dva下怎么实现啊
使用
dva-loading
模块:dva 有一个管理 effects 执行的 hook,并基于此封装了 dva-loading 插件。通过这个插件,我们可以不用疯狂地写 showLoading 和 hideLoading,当发起请求时,插件会自动设置数据里的 loading 状态为 true 或 false 。然后我们在渲染 components 时绑定并根据这个数据进行渲染。
在入口那引入文件
在组件中绑定loading数据
参考别人的案例:dva-example-user-dashboard