nuxtjs page render the expressions before nuxtServerInit finish - vue.js

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);
}
}
};