该视频仅会员有权观看
立即开通课程「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。
