Привет! Использую 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);
},
};
