Получать данные по запросу в VueJS (vuex)

Question

У меня есть хранилище с некоторыми данными, которые используются несколькими компонентами:

export default new Vuex.Store({
    state: {
        _invoices: [],
    },
    mutations: {
        setInvoices: (state, invoices) => (state._invoices = invoices),
    },
    actions: {
        getInvoices: context => {
            setTimeout(() => {
                const invoices = [{id: 1}, {id: 2}, {id: 3}];
                // mimicking ajax call
                context.commit('setState', invoices);
            },2000);
        },
    },
})

В моем компоненте я вызываю $store.dispatch('getInvoices'), чтобы фактически извлечь их.

Есть ли способизвлекать счета-фактуры автоматически (то есть без ручного вызова getInvoices изнутри компонента), но только тогда, когда счета фактически запрашиваются?

например, если пользователь вошел в систему только для того, чтобы изменить свой пароль и никогда не заходит в компонентдля этого требуются счета-фактуры, они не загружаются.

, как я уже упоминал, для нескольких компонентов требуются счета-фактуры, поэтому я бы хотел избежать добавления $store.dispatch('getInvoices') в метод mounted() каждого компонента.

любые идеи приветствуются.

Answer 1

Вы можете использовать Navigation Guards, если вы используете Vue Router

Используйте router.beforeEach(), если вы используете Vue Router.
https://router.vuejs.org/guide/advanced/navigation-guards.html

Используйте промежуточное ПО, если вы используете Nuxt.js, но технически промежуточное программное обеспечение такое же, как навигационная защита.
https://nuxtjs.org/guide/routing#middleware

Answer 2

Вы можете просто создать миксин, который вызывает $store.dispatch('getInvoices') на хуке mounted.Затем используйте этот миксин в каждом компоненте, который должен получать счета.