Vuex - 첫 번째 getter 호출 시 API에서 데이터를 로드한 후 상태에서 로드합니다.

Vuex - 첫 번째 getter 호출 시 API에서 데이터를 로드한 후 상태에서 로드합니다.

나는 가지고 있다Vuex데이터를 로드하는 인스턴스API스토어에 처음 접속했을 때 API에서 데이터를 로드하고 다시 접속했을 때 로드된 데이터를 반환한다.store.empresasVuex 모듈의 외관은 다음과 같습니다.

import Empresas from '@/api/empresas'
import moment from 'moment'

export default {
  state: {
    loaded: false,
    lastLoadedDate: null,
    empresas: []
  },

  getters: {
    empresas: state => {
      if (!state.loaded || moment().diff(state.lastLoadedDate, 'minutes') > 30) {
        //Was not loaded yet or was loaded more than 30 minutes ago,
        //Sould load from api -> actions.carregarEmpresas()
        //Don't know how to proceed here
      } else {
        //Already loaded
        return state.empresas
      }
    }
  },

  mutations: {
    setEmpresas (state, payload) {
      state.loaded = true
      state.lastLoadedDate = moment()
      state.empresas = payload
    }
  },

  actions: {
    carregarEmpresas ({ commit }) {
      Empresas.listar()
        .then(({ data }) => {
          commit('setEmpresas', data.empresas)
        })
    }
  }
}

이 기능이 필요한 이유는 이 시스템에 접속해야 하기 때문입니다.empresas매번 API 호출을 하고 싶지 않습니다.

하지만 저는 게터 안에서 어떻게 구현해야 할지 모르겠어요.할 수 있을까요?

이 글은 Vuex의 getters에서 디스패치를 할 수 있습니까?라는 글과 중복될 수 있습니다.두 번째 답이 도움이 되는지 확인하세요.

기본적으로, 당신은 당신이 얻는 사람의 행동을 요구해서는 안 된다.앱의 최초 로딩 시 액션 호출을 권장합니다.그럼 조건 없이 게터만 사용하시면 됩니다.

언급URL : https://stackoverflow.com/questions/62916506/vuex-load-data-from-api-on-first-getter-call-and-then-load-from-state