@Erik2121

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

Когда хочу взять данные о пользователе (имя, аватарку) например из 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>

Т.е всё работает, но данные приходят с задержкой небольшой, подскажите как сделать так, чтобы всё было без задержек, возможно кэширование?
  • Вопрос задан
  • 413 просмотров
Пригласить эксперта
Ответы на вопрос 1
@vanillathunder
Поместить в asyncData.
asyncData: {
    if (Cookie.get('token') == null) {
        this.$store.dispatch('userdata')
    }
    this.$store.state.user = this.token();
},
mounted: {}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы