[不懂就问]关于 nuxtjs ssr 的一个问题

2020-11-16 14:39:00 +08:00
 id4alex

目前正在学习 nuxtjs 前端开发,目前遇到一个场景, 如果客户端 cookie 中携带 token,那么页面在 server side 就把用户信息渲染好. 代码如下:

store/index.js

export const state = () => ({
    user: null,
    token: null
});

export const mutations = {
    saveUser(state, userValue) {
        console.log("这里执行 store.user.save = " + JSON.stringify(userValue));
        state.user = userValue;
    },
    saveToken(state, token) {
        console.log("这里执行 store.token.save = " + token);
        state.token = token;
    }
};

export const actions = {
    nuxtServerInit({ commit }, app) {
        const token = app.$cookies.get("token") && app.$cookies.get("token").indexOf("Bearer ") == 0 ? app.$cookies.get("token") : null;
        console.log('nuxtserver init 初始化 token = ', token)
        if (token) {
            commit("saveToken", app.$cookies.get("token"));
            this.$axios.post("/api/me").then(res => {
                commit("saveUser", res.data.data);
            });
        }
    }
};

pages/index.vue

<template>
  <div>{{user}}</div>
</template>

<script>
export default {
  computed: {
    user() {
      console.log("这里执行 computed " + this.$store.state.token)
      return this.$store.state.user;
    },
  },
}
</script>

<style>
</style>

后台输出

nuxtserver init 初始化 token =  Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI0OWYxMjgwZTkxODRjZmMyIiwiZXhwIjoxNjA1NTE2OTAyfQ.ozioLM26fGVO8SfqfZllwp8j6Gy_PWoDsntPzlvXor0                                                                                                                    14:25:53
这里执行 store.token.save = Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI0OWYxMjgwZTkxODRjZmMyIiwiZXhwIjoxNjA1NTE2OTAyfQ.ozioLM26fGVO8SfqfZllwp8j6Gy_PWoDsntPzlvXor0                                                                                                                      14:25:53
Making request to /api/me                                                                                                                                                                                                                                                                           14:25:53  
这里执行 computed null                                                                                                                                                                                                                                                                              14:25:53  
这里执行 store.user.save = {"id":"49f1280e9184cfc2","nickname":"test","avatar":"https://vip1.loli.net/2020/11/15/Eqlr5T7JcmOuDWk.jpg"}                                                                                                               14:25:53

为啥在 index.vue 的 computed 里面 this.$store.state.user 会比 nuxtServerInit commit("saveUser", res.data.data)想执行啊?

为什么会出现这个问题,以及怎么解决

236 次点击
所在节点    问与答
2 条回复
lxzxl
2020-11-16 14:54:31 +08:00
你的 nuxtServerInit 没有返回 Promise, 改成 `return this.$axios.post...`
id4alex
2020-11-16 14:59:12 +08:00
@lxzxl 老铁...破案了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/725789

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX