SP00F
V2EX  ›  Vue.js

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

  •  
  •   SP00F · May 2, 2018 · 2218 views
    This topic created in 3023 days ago, the information mentioned may be changed or developed.

    查过资料没有什么结果,首先怀疑的是 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}} 就不行了。

    希望有人能解惑~ 多谢

    9 replies    2018-05-02 03:25:27 +08:00
    noe132
        1
    noe132  
       May 2, 2018 via Android   ❤️ 1
    你的 userinfo 是 undefined。在你 beforemount 之前就调用了 userinfo。
    加个判断就行了。
    SP00F
        2
    SP00F  
    OP
       May 2, 2018
    @noe132 #1

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

    但是刷新加载页面后输出整个 userinfo 是没问题的,调用 userinfo.nickname 就会报错。
    POPOEVER
        3
    POPOEVER  
       May 2, 2018   ❤️ 1
    localStorage 里是字符串吧,读成对象要 JSON.parse() 的吧
    SP00F
        4
    SP00F  
    OP
       May 2, 2018
    @POPOEVER #3

    多谢回复!

    我在 Vuex 读取出来的时候就 `JSON.parse(localStorage.getItem('userinfo'))` 读出来了
    ss098
        5
    ss098  
       May 2, 2018 via Android   ❤️ 1
    你要把 userinfo 的默认值设为 {}。
    POPOEVER
        6
    POPOEVER  
       May 2, 2018
    console.log 出来的结果在开发工具里是会异步更新的,所以你得用 vue 的开发工具来调试,看 localStorage 的数据读取是否是在 template 加载前完成,再不济就用 callback 调呗

    P.S, 不好意思,我玩 Angular 的,不过道理应该一样的吧 :P
    SP00F
        7
    SP00F  
    OP
       May 2, 2018
    @ss098 #5 我尝试一下多谢!

    @POPOEVER #6 beforemount 里面 console.log 的,调试工具现在也是有点捉急。我看下楼上的方案试试
    POPOEVER
        8
    POPOEVER  
       May 2, 2018
    @SP00F 嗯嗯,我也就瞎出主意,五楼可能说出了真相,因为想起微信小程序里就是的,必须在 data 里声明空对象,跟 vue 一个调性,哈哈
    SP00F
        9
    SP00F  
    OP
       May 2, 2018
    @POPOEVER #8 5 楼解决我的问题了。。。 我想起来我设置就是 null 导致的


    @ss098 #5 多谢兄弟!
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1131 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 23:27 · PVG 07:27 · LAX 16:27 · JFK 19:27
    ♥ Do have faith in what you're doing.