Как правильно организовать вывод данных пользователя в Nuxt.js?

Question

[Erik2121]

Когда хочу взять данные о пользователе (имя, аватарку) например из localStorage или Cookie, то данные отображаются с задержкой, я в принципе понимаю почему, но не до конца, пример кода в Vuex:

STORE:

import Vue from 'vue'
import Vuex from 'vuex'
import routesapp from '@/static/api'
import axios from 'axios'
import * as Cookie from 'js-cookie'

Vue.use(Vuex)
const store = () => new Vuex.Store({

  state: {
    user: []
  },
  actions: {
    userdata ({
      commit
    }) {
      if (Cookie.length !== 0) {
        commit ('SET_USER', Cookie.get('token'))
      } else {
        axios.get(routesapp.user.id, {params: {id: 20140056}}).then((res) => {
          commit('GET_USER', res.data[0])
        })
      }
    },
    getUserData ({commit, state}, data) {
      state.user = data.storage
    }
  },
  mutations: {
    increment (state) {
      state.counter++
    },
    GET_USER(state, data) {
      state.user = data
      if (state.user.length !== 0) {
        Cookie.set('token', JSON.stringify(data), { expires: 7 })
      }
    },
    SET_USER(state, data) {
      state.user = JSON.parse (data)
    }
  }

})

export default store

КОМПОНЕНТ:

<template>
  <div class="profile">
    <img :src="userdata.img"
    class="image--cover d-table mx-auto shadow-lg">
    <h3 class="text-center mt-3" style="min-height: 33px">
        {{ userdata.name }}
    </h3>
    <p>{{ userdata.info }}</p>
  </div>
</template>

<script>

import * as Cookie from 'js-cookie'

export default {
  components: {
    
  },
  data() {
    return {
      
    }
  },
  methods: {
    token() {
      return JSON.parse(Cookie.get('token'))
    }
  },
  mounted() {
    if (Cookie.get('token') == null) {
        this.$store.dispatch('userdata')
    }
    this.$store.state.user = this.token()
  },
  computed: {
    userdata() {
      return this.$store.state.user
    }
  },
  created () {
    
  }
}
</script>

Т.е всё работает, но данные приходят с задержкой небольшой, подскажите как сделать так, чтобы всё было без задержек, возможно кэширование?

Comments

[Модератор]

Erik2121 дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац).
В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

Answer 1

[Nikita Dergachov]

Поместить в asyncData.

asyncData: {
    if (Cookie.get('token') == null) {
        this.$store.dispatch('userdata')
    }
    this.$store.state.user = this.token();
},
mounted: {}