Я все еще думаю, что вы должны реструктурировать свои компоненты, чтобы они загружали данные в компонент представления, а не в хранилище. Хранилище предназначено для данных, которые совместно используются различными представлениями или, по крайней мере, относятся к более широкой части приложения, в то время как ваши данные кажутся специфичными только для одного представления. Вместо этого просто передайте данные через реквизит.
Views
- View A
- View B
Components
Common
- Sidebar (the common sidebar that is loaded in both View A and View B)
- Some other components specific to view a and b
Если вы намерены продолжить использовать хранилище для локальных данных, я думаю, у вас есть несколько вариантов:
- Вы можете нажатьВаш загрузчик с URL или именем представления. Если в вашем штате вы обычно просто располагаете данными, теперь у вас есть объект, который отображает маршрут или имя вида на некоторые данные. Затем вы используете метод получения, который автоматически получает правильные данные для вас. Дополнительным преимуществом этого является то, что вы можете оставить свои данные, если хотите, что ускоряет загрузку, когда вы возвращаетесь к этому представлению (вам больше не нужно выполнять вызов API).
- Вы фиксируете некоторыетокен в хранилище и переопределяет данные в состоянии вашего хранилища только тогда, когда токен совпадает с токеном извлечения. (Например,
dispatch('get/my/data', { token: 'asdf' }) при выполнении ранее commit('switch/to/view', 'asdf'). Если представление не соответствует представлению, в котором мы находимся в данный момент, мы просто отбрасываем данные.
В обоих случаях вы бы отправили действие загрузки счто-то вроде dispatch('get/my/data', { view: this.$options.name }) (или: this.$route.path или this.$route.name)
Если вы идете по пути использования имени компонента, вам придется выполнить коммит, как указано выше. В противном случае вы можетепросто импортируйте ваш маршрутизатор с import router from '../router' или чем-то похожим.
Для первого варианта вы получите что-то вроде этого:
импорт маршрутизатора из '../router'; импорт Vue из 'vue';
{
state: {
data: {},
},
getters: {
getData (state) {
return state.data[router.currentRoute.path];
}
},
mutations: {
setData (state, { view, data }) {
Vue.$set(state.data, view, data);
}
},
actions: {
async fetchData ({ commit }, { view }) {
const data = await myApiPromise;
commit('setData', { view, data });
}
}
}
Теперь getData либо возвращает данные, если вы загрузили данные для этого представления, либо undefined, если вы этого не сделали. Переключение просто захватит ранее сохраненные данные, которые могут или могут бытьполезно для вас.
Второй вариант аналогичен, но вам нужно беспокоиться о дополнительной мутации. Эта мутация вызывается с created в каждом представлении. Не беспокойтесь о том, чтобы убирать за собой при уничтожениикомпонент, буПеред очисткой я могу почистить.
{
state: {
data: null,
view: '',
},
getters: {
getData (state) {
return state.data[router.currentRoute.path];
}
},
mutations: {
clearData (state) {
Vue.$set(state, 'data', null);
},
setData (state, { view, data }) {
if (state.view !== view) {
// Do not update
return;
}
Vue.$set(state, 'data', data);
},
setView (state, { view }) {
Vue.$set(state, 'view', view);
}
},
actions: {
async fetchData ({ commit }, { view }) {
commit('clearData');
const data = await myApiPromise;
commit('setData', { view, data });
}
}
}