nuxtjs page render the expressions before nuxtServerInit finish

Question

I am using nuxtjs to develop my app, I want the page rendering userinfo if request already had the cookie['token']. I found that the page render the expressions before nuxtServerInit finish.

How can I fix this problem?

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>

output

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

Answer 1

Yes because an axios call is asynchronous. You can use async / await to make it "syncrhonouse"

export const actions = {
    async 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"));
           let {data} = await this.$axios.post("/api/me")
           commit("saveUser", data.data);

        }
    }
};