该视频仅会员有权观看
立即开通课程「Vue.js前端应用开发实践」权限。
- 在View的Store中,异步操作是常见的,这时可以显示一个加载状态。
- 可以在Store中添加一个名为
loading
的state,初始化为false
。
- 创建一个mutation
setLoading
,用于更改loading
的值。
- 在执行异步动作如
getName
前,通过提交mutation setLoading
将loading
的值设置为true。
- 使用
setTimeout
来模拟异步操作,延迟后改变name
的state,并将loading
设置为false。
- 在App组件的computed属性中使用
mapState
来引用loading
,使其在组件中被访问。
- 可以在组件上添加条件渲染的“加载中”文本,使用
v-if
指令根据loading
的值显示或隐藏。
- 当
loading
为true时,“加载中”显示;得到数据后,loading
变为false,不显示该文本。
- 在浏览器中刷新页面将触发
getName
动作,该动作将首先设置loading
为true,然后在获取数据后将其设置为false。