Vuex - 在第一次 getter 调用时从 API 加载数据，然后从状态加载答案

【问题标题】：Vuex - Load data from API on first getter call and then load from stateVuex - 在第一次 getter 调用时从 API 加载数据，然后从状态加载
【发布时间】：2020-11-05 01:09:48
【问题描述】：

我有一个Vuex 实例，它从API 加载数据。我第一次访问商店时，它应该从 API 加载数据，当我再次访问它时，它应该从 store.empresas 返回加载的数据。这就是我的 Vuex 模块的样子：

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 调用。

但是，我不知道如何在 getter 中实现它。有可能吗？

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

这可能是此帖子的副本：Can I do dispatch from getters in Vuex。检查第二个答案是否对您有帮助。

基本上，您不应该调用 getter 的操作。我建议您在应用程序的初始加载时调用该操作。然后，您将只使用不带条件的 getter。

【讨论】：