Dentro de una vista de historial, extraigo el historial del servidor backend llamando a la acción Vuex en created() y paso los datos a la tabla de historial usando una función calculada, history() que accede al estado del módulo de historial.
El problema es que, cada vez que vuelvo a la vista Historial, se realizan nuevas solicitudes al servidor debido a la llamada a la acción en created() .
¿Cómo puedo configurar para que la llamada se realice la primera vez que se accede a la vista y confiar en el estado del historial para visitas posteriores a esta vista?
Historia.vue
<script> import { mapActions } from "vuex"; export default { name: "History", data() { return { // data }; }, methods: { ...mapActions(["fetchHistory"]), refresh() { this.fetchHistory() }, computed: { history() { return this.$store.state.history.records; }, }, created() { this.refresh(); }, }; </script>historyModule.js
async fetchHistory({commit}){ await axios.get('api/history') .then((response) => { commit('setHistory', response.data) return Promise.resolve(); }) .catch((error) => { commit('setHistory', []) return Promise.reject(error) }) }Si history.records es una matriz, puede verificar la longitud antes de enviar acciones:
created() { if(!this.$store.state.history.records.length) this.refresh(); },Si desea que este patrón funcione en todos los componentes, puede agregar el mismo comportamiento a la acción de Vuex en lugar del gancho creado. Esto también mantendrá todos sus comportamientos de Vuex dentro del código de su tienda.