在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路由器，则可以使用Navigation Guards

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

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

Answer 2

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