Как из store зарефетчить все запросы из fetch() на текущей странице?

В Nuxt.js, вы можете использовать fetch метод для получения данных на клиенте перед рендерингом страницы, а также на сервере при первичной загрузке страницы. Вместо того, чтобы выполнить запросы AJAX напрямую в методе fetch, вы можете использовать actions в вашем хранилище (store) для выполнения запросов и сохранения полученных данных.

Для зарефетчивания всех запросов из fetch() на текущей странице из хранилища, вы можете использовать следующий подход.

1. Создайте файл store/index.js (если его еще нет) для определения вашего хранилища:

// store/index.js

export const state = () => ({})

export const mutations = {}

export const actions = {
  async fetchAll({ dispatch }, context) {
    // Получите массив всех запросов fetch() на текущей странице
    const fetches = context.app.$fetch()

    const promises = fetches.map(({ store, params }) => {
      // Выполните запрос и передайте его в соответствующий action в вашем хранилище
      // store - имя модуля хранилища, params - объект с параметрами запроса
      return dispatch(`${store}/fetchData`, params, { root: true })
    })

    // Дождитесь выполнения всех запросов
    await Promise.all(promises)
  }
}

2. В вашем компоненте (странице) вызовите метод fetchAll из хранилища:

// pages/example.vue

export default {
  async fetch({ store, context }) {
    // Зарефетчьте все запросы из fetch() на текущей странице
    await store.dispatch('fetchAll', context)
  }
}

3. Выведите полученные данные в шаблоне вашего компонента:

<!-- pages/example.vue -->

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    items() {
      // Получите данные из вашего хранилища
      return this.$store.state.yourModule.items
    }
  }
}
</script>

В данном примере предполагается, что у вас есть модуль в вашем хранилище (store) с именем "yourModule", в котором определен action с именем "fetchData", который выполняет конкретные запросы и сохраняет данные в state.

Обратите внимание, что в этом примере используется возможность комбинированного вызова dispatch с параметром root: true для вызова action из корневого пространства имён хранилища. Это позволяет вызывать actions, которые находятся в модулях хранилища.

Таким образом, вы можете выполнить все запросы на текущей странице из хранилища и сохранить полученные данные, чтобы использовать их в шаблоне вашего компонента.