pro-dev
@pro-dev

Vuex как с ним работать?

Привет! Использую nuxt js. В котором есть хранилище vuex. У меня есть несколько вопросов по этой тематике, которую не могу найти сам:

1. Сколько время жизни данных в store Vuex? Я заметил, что при нажатии F5 данные из store пропадают. Или это только в dev режиме?

2. У меня есть api который получает список мероприятий и сохраняет его в store (код ниже). Для этого я посылаю запрос на api/events. Однако, в нём возвращаются не полные данные по мероприятиям, в отличии от запроса по id api/events/1. В итоге при работе через vuex store и переходе по id данные у меня различаются. А именно не хватает одного поля cancelReason. При разработке api посчитал, что оно не нужно для вывода в списке и не выводил его. Теперь мне приходится иметь два хранилища events и event в Vuex. Как синхронизировать в store vuex? Или же мне нужно добавить в api это поле с данными? Как правильно поступать?

3. Как изменять массив events в actions? . Использую такой асинхронный запрос к api
async activate({commit}, event) {
    await this.$axios.$post('/events/' + event.id + '/activate')
  },
. Меняю статус на активный. Как мне теперь обновить store по id?

4. Сколько данных можно занести в vuex store?

5. И последний вопрос. Стоит ли вообще использовать vuex для api? Вообще читал много, что это хорошая практика по работе. Можно в любой момент поменять api хранилище на другое. Так же данные в хранилище vuex всегда акткуальные, даже если запросы у нас асинхронные. Это тоже большой плюс. Поэтому, полагаю, что использовать vuex store хорошая практика. Однако не до конца могу понять правильность работы с ней...

PS Спасибо за вашу помощь. Ответ ищу пол ночи))) Если есть хорошие примеры c VUEX Store - буду благодарен за ссылки)
Мой код
export const state = () => ({
  events: []
});

export const mutations = {
  SET_EVENTS(state, events) {
    state.events = events
  }
};

export const actions = {
  async activate({commit}, event) {
    await this.$axios.$post('/events/' + event.id + '/activate')
  },
  async cancel({commit}, event) {
    await this.$axios.$post('/events/' + event.id + '/cancel');
  },
  async all({commit}) {
    const events = await this.$axios.$get('events');
    commit('SET_EVENTS', events.items)
  }
};

export const getters = {
  events: s => s.events,
  get: s => id => {
    return s.events.find(event => event.id === id);
  },
};
  • Вопрос задан
  • 341 просмотр
Пригласить эксперта
Ваш ответ на вопрос

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

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