Vue.js 在VueJS（vuex）中按需获取数据

我有一个包含多个组件使用的一些数据的存储：

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

），但仅在实际请求发票时

e、 g.如果用户登录只是为了更改其密码，并且从不使用需要发票的组件，则不会加载这些组件

正如我提到的，多个组件需要发票，因此我希望避免在每个组件的

mounted（）

方法中放置

$store.dispatch（'getInvoices'）

---

欢迎提出任何想法。

您只需创建一个mixin，在

挂载的
钩子上调用
$store.dispatch（'getInvoices'）
。然后在需要获取发票的每个组件中使用该mixin。
如果您使用的是Vue路由器，则可以使用导航卫士
如果您使用的是Vue路由器，请使用路由器.beforeach（）
。


如果您使用的是Nuxt.js，请使用中间件，但从技术上讲，中间件与navigation guard相同。

可以显示main.js和一些组件代码吗？代码太多了，你到底在寻找什么？你的一个组件和<代码> Me.js，然后考虑创建一个在整个应用程序中把这个调用添加到每个组件的方法……但是，当你在你想要使用它的组件中提供自定义选项时，它才会被调用。在组件的定义中会很清楚，而不是隐藏在你的
挂载的
钩子中。这真是个坏主意。它带来的混乱比有用的多。