vue.js - 关于 Vue+Vuex的几个问题

问题描述

问 题

业务场景：进入一个页面后，需要发起请求去获取数据。比如进入用户详情页面，页面需要展示username,age等数据，但这些数据需要发起一个请求去拿到。在模板中通过{{userInfo.username}}这种方式获取。
实现这个操作我的思路是：在对应的组件创建或者挂载时触发一个action,通过这个action发起请求，action拿到数据后赋值进state,在组件中可以通过getter拿到state中对应的数据.通过上述方法实现会遇到一个问题：运行时会报出这样的错误：

[Vue warn]: Error when rendering component <app-header>:
Uncaught TypeError: Cannot read property 'username' of null

我理解错误原因是：
组件在请求还没有拿到数据的时候就会渲染，当渲染{{userInfo.username}}时，其实userInfo还是null.所以现在就产生了几个问题：
1.项目中使用Vuex，是不是组件中需要的数据都需要通过getter从state中获取，包括一些通过请求拿到的数据？
2.如果上述是正确的话，那么遇见例子中报错的情况应该怎么处理？
3.如果不正确，那么对于这种 组件渲染时需要的数据还没拿到 情况要怎么处理？

解决方案

既然使用了Vuex,最好还是通过getter去获取比较好。
对于例子中的报错，我认为可以在组件初始化时，给userInfo一个非空赋值（比如{}）。这样就不会导致页面报错。

这篇关于vue.js - 关于 Vue+Vuex的几个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！