Как глобально сохранить данные с сервера?

Question

Недавно начал осваивать Vue, и не могу понять, как организовать "глобальное хранилище".

А теперь, к сути:

Необходимо один раз получить данные о пользователе (с сервера), что бы потом работать с ними из любого компонента.

Пробовал store (vuex), но при использовании в компонентах, он делает очередной запрос на сервер.

Например, мне нужно получить данные в компонентах: левое меню, верхнее меню и сама страница - это уже три запроса, а хотелось бы ограничится одним :)

Answer 1

Я думаю ты был на верном пути когда начал использовать Vuex, но что то пошло не так. Для начало создай action запроса данных в самом store примерно так:

state: {
 user: undefined
},
mutations: {
  set_user_data(state, paylaod) {
     state.user = paylaod;
  }
},
actions: {
   getUserData ({commit}, payload) {
      const { user } = payload;
      return axios({ url: наш-сервер, method: 'GET', params: {id: user.id, и-еще-какие-то-дынные-для-запроса} })
      .then( resp => {
        // условное получение данных
        commit('set_user_data', resp.data);
      })
   }
},
getters: {
   userData: state => state.user
}

теперь как мы получили данные ты можешь брать их с помощью mapGetter в компоненте

например так

import { mapGetters } from 'vuex';

export default {
  computed: {
        ...mapGetters([
            'userData' // далее в это компоненте можешь обращаться к нему как this.userData 
        ]),
       }

}

и есть вариант без mapGetter на прямую взять данные из state например : this.$store.state.user

БЛОГ НА HUSL

Как глобально сохранить данные с сервера?

Ответы (1 шт):