Приветствую.
У меня есть хранилище, где хранится список городов
export default new Vuex.Store({
state: {
cities: [],
},
mutations: {
SET_CITIES(state, payload) {
state.cities = payload;
}
},
getters: {
cities: (state) => {
return state.cities;
}
},
actions: {
fetchAllCities(context) {
axios.get('http://localhost:3000/cities', {
})
.then(response => {
context.commit('SET_CITIES', response.data)
});
}
},
modules: {}
});
И у меня есть две страницы:
{
path: "/cities",
name: "Cities",
component: () =>
import(/* webpackChunkName: "landing" */ "../views/cities/List.vue")
},
{
path: "/cities2",
name: "Cities2",
component: () =>
import(/* webpackChunkName: "landing" */ "../views/cities/List2.vue")
},
Эти оба компонента, для своей работы, требуют наполненного $store.state.cities, так что у каждого прописано:
created: function() {
this.$store.dispatch('fetchAllCities');
},
Но делая так, получается что при переходе между страницами мы заново будем 1) делать аякс запрос (кеширование пока не рассматриваем) 2) внесение этих данных в систему реактивности
Вот , я подумал, что может мне в ситуациях, когда во vuex уже может быть загруженные данные, надо делать проверку, типа из компонентов такой экшен вызывать:
actions: {
fetchOnceAllCities(context) {
if (this.state.cities.length) return; // <-----------
// loading only one time:
axios.get('http://localhost:3000/cities', {
})
.then(response => {
context.commit('SET_CITIES', response.data)
});
}
},
Простой