VueJS(vuex)에서 온디맨드 방식으로 데이터 가져오기

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인보이스가 실제로 요청될 때만 구성 요소 내부에서).

예를 들어 사용자가 비밀번호를 변경하기 위해 로그인한 후 송장이 필요한 구성요소에 접속하지 않으면 로드되지 않는다.

앞서 언급했듯이, 여러 구성 요소에는 인보이스가 필요하므로, 나는 인보이스가 필요하지 않기 때문에,$store.dispatch('getInvoices')모든 구성 요소에서mounted()방법의

어떤 아이디어든 감사하게 생각한다.

Vue 라우터를 사용하는 경우 네비게이션 가드를 사용할 수

사용하다router.beforeEach()Vue 라우터를 사용하는 경우.
https://router.vuejs.org/guide/advanced/navigation-guards.html

Nuxt.js를 사용하는 경우 미들웨어를 사용하되, 기술적으로는 미들웨어가 내비게이션 가드와 동일하다.
https://nuxtjs.org/guide/routing#middleware

그냥 전화를 거는 믹스인을 만들면 된다.$store.dispatch('getInvoices')에서mounted훅. 그럼 송장을 가져와야 하는 모든 부품에 그 혼합물을 사용해.

참조URL: https://stackoverflow.com/questions/52673781/fetch-data-on-demand-in-vuejs-vuex