请教个有关 Vue.js 使用 Nuxt.js 服务端渲染，使用 Vuex 取数据的时候报错

[SP00F]

查过资料没有什么结果，首先怀疑的是 SSR 的问题，但是简单的测试感觉不是 SSR 的问题。没有找到原因，希望在这里能得到解惑！

使用 Nuxt.js 做服务端渲染，前后端分离，Token 存储在 localStorage 里，也包含了一些一般不会改动用户信息。

因为需要读 localStorage 存储的用户信息，在服务端是无法操作的，所以在 beforeMount() 的时候用 Vuex 将 localStorage 的 Token 给读出来，以及包含一些用户信息。

存储的用户信息是 JSON，在组件或页面中使用 mapState 或者是 mappGetters 映射到 computed 后，在 template 中使用 userinfo.nickname 的时候报 Cannot read property nickname

没有找到原因，console.log() 或者是 <template>{{userinfo}}</template> 是正常输出，并且是 Object 没问题，但是如果用 <template>{{userinfo.nickname}}</template>的时候直接就 Cannot read property nickname 没有找到原因，查过 Google 没有什么收获。

感觉上不是 SSR 的问题，我用循环这个 object 或者直接调都可以全部输出，但是用 {{userinfo.nickname}} 就不行了。

希望有人能解惑~ 多谢

[noe132]

你的 userinfo 是 undefined。在你 beforemount 之前就调用了 userinfo。
加个判断就行了。

[SP00F]

@noe132 #1

多谢回复， 意味着在 beforemount 的时候需要再次调用 Vuex 获取 localStorage 存储 userinfo 吗？

但是刷新加载页面后输出整个 userinfo 是没问题的，调用 userinfo.nickname 就会报错。

[POPOEVER]

localStorage 里是字符串吧，读成对象要 JSON.parse() 的吧

[SP00F]

@POPOEVER #3

多谢回复！

我在 Vuex 读取出来的时候就 `JSON.parse(localStorage.getItem('userinfo'))` 读出来了

[ss098]

你要把 userinfo 的默认值设为 {}。

[POPOEVER]

console.log 出来的结果在开发工具里是会异步更新的，所以你得用 vue 的开发工具来调试，看 localStorage 的数据读取是否是在 template 加载前完成，再不济就用 callback 调呗

P.S, 不好意思，我玩 Angular 的，不过道理应该一样的吧 :P

[SP00F]

@ss098 #5 我尝试一下多谢！

@POPOEVER #6 beforemount 里面 console.log 的，调试工具现在也是有点捉急。我看下楼上的方案试试

[POPOEVER]

@SP00F 嗯嗯，我也就瞎出主意，五楼可能说出了真相，因为想起微信小程序里就是的，必须在 data 里声明空对象，跟 vue 一个调性，哈哈

[SP00F]

@POPOEVER #8 5 楼解决我的问题了。。。 我想起来我设置就是 null 导致的


@ss098 #5 多谢兄弟！