logo

该视频仅会员有权观看

立即开通课程「Vue.js前端应用开发实践」权限。

¥
199
/ 年
  • 在View的Store中,异步操作是常见的,这时可以显示一个加载状态。
  • 可以在Store中添加一个名为loading的state,初始化为false
  • 创建一个mutation setLoading,用于更改loading的值。
  • 在执行异步动作如getName前,通过提交mutation setLoadingloading的值设置为true。
  • 使用setTimeout来模拟异步操作,延迟后改变name的state,并将loading设置为false。
  • 在App组件的computed属性中使用mapState来引用loading,使其在组件中被访问。
  • 可以在组件上添加条件渲染的“加载中”文本,使用v-if指令根据loading的值显示或隐藏。
  • loading为true时,“加载中”显示;得到数据后,loading变为false,不显示该文本。
  • 在浏览器中刷新页面将触发getName动作,该动作将首先设置loading为true,然后在获取数据后将其设置为false。