在 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

如果你使用 Vue Router，你可以使用 Navigation Guards

如果您使用的是 Vue 路由器，请使用 router.beforeEach()。
https://router.vuejs.org/guide/advanced/navigation-guards.html

如果您使用 Nuxt.js，请使用中间件，但从技术上讲，中间件与导航守卫相同。
https://nuxtjs.org/guide/routing#middleware

Answer 2

您可以在 mounted 挂钩上创建一个调用 $store.dispatch('getInvoices') 的 mixin。然后在需要获取发票的每个组件中使用该 mixin。