如何在 nuxt fetch 中使用一些 dispatch？

Question

我在 nuxt 中创建了一个站点，并从 worpdress api 获取了数据。我有几家商店：home.js、solutions.js、tipo.js、portfolio.js 和 options.js.

在 fetch 中，我检查存储数组是否为空，然后调用调度和填充数组。

export default {
  async fetch({ store }) {
    try {
      if (store.getters['home/home'].length === 0) {
        await store.dispatch('home/fetchHome');
      }
      if (store.getters["solutions/getSolutions"].length === 0) {
        await store.dispatch('solutions/fetchSolutions');
      }
      if (store.getters["tipo/getTipo"].length === 0) {
        await store.dispatch('tipo/fetchTipo');
      }
      if (store.getters["portfolio/getPortfolio"].length === 0) {
        await store.dispatch('portfolio/fetchPortfolio');
      }
      if(store.getters["options/getOptions"].length === 0){
        await store.dispatch('options/fetchOptions');
      }
    } catch (e) {
      console.log(e, 'e no data')
    }
  },
  components: { HomeContacts, PortofolioSlider, Clients, ChiSiamo, Solutions, HomeIntro }
}

但问题是，页面加载时间过长。因为我调用 dispatches throw await，我想，这就是问题所在。

我如何调用 fethc 中的所有分派，没有异步，但并行？

我看到使用 fetch 而不是 asyncData 的优势在于只有第一次加载页面时，我需要稍等片刻，数组会填满，当我从另一个页面到达当前页面时, 将不会有通过 api 的请求，数据将从存储中输出。

只是关于nuxt的意识形态方面的资料很少，如何工作以及什么时候用什么更好。接下来，这个更好

这个方法不行。

fetch({ store }) {
  const promise1 = new Promise((resolve, reject) => {
    if (store.getters['home/home'].length === 0) {
      resolve(store.dispatch('home/fetchHome'));
    }
  });
  const promise2 = new Promise((resolve, reject) => {
    if (store.getters["solutions/getSolutions"].length === 0) {
      resolve(store.dispatch('solutions/fetchSolutions'));
    }
  });
  const promise3 = new Promise((resolve, reject) => {
    if (store.getters["tipo/getTipo"].length === 0) {
      resolve(store.dispatch('tipo/fetchTipo'));
    }
  });
  const promise4 = new Promise((resolve, reject) => {
    if (store.getters["portfolio/getPortfolio"].length === 0) {
      resolve(store.dispatch('portfolio/fetchPortfolio'));
    }
  });
  const promise5 = new Promise((resolve, reject) => {
    if (store.getters["options/getOptions"].length === 0) {
      resolve(store.dispatch('options/fetchOptions'));
    }
  });
  Promise.all([promise1, promise2, promise3, promise4, promise5])
    .then((data) => console.log(data))
    .catch((error) => console.log(error));

Answer 1

Promise.all 在这里很有用：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
甚至 Promise.allSettled()，具体取决于您要执行的操作：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled

那么，这是在您的页面进行抓取时显示内容的问题。您可以在页面的顶层使用 v-if="$fetchState.pending" 在获取整个内容时显示加载器。

这里与意识形态无关，有 2 个挂钩通过阻止页面呈现 (asyncData()) 或允许您在获取数据时呈现它 (fetch()).

与框架本身没有任何关系，你可以随意做。

Answer 2

假设：

store.dispatch()returns答应，
问题中的第一次尝试大体上是正确的，
objective是并行执行相关调度，

然后：

从store.dispatch()序列中剔除await，
将store.dispatch()返回的promise累加到一个数组中，
不要使用 new Promise() 包装器，

await Promise.all(promises).

返回的 Promise

export default {
    async fetch({ store }) {
        try {
            let promises = [];
            if (store.getters['home/home'].length === 0) {
                promises.push(store.dispatch('home/fetchHome'));
            }
            if (store.getters['solutions/getSolutions'].length === 0) {
                promises.push(store.dispatch('solutions/fetchSolutions'));
            }
            if (store.getters['tipo/getTipo'].length === 0) {
                promises.push(store.dispatch('tipo/fetchTipo'));
            }
            if (store.getters['portfolio/getPortfolio'].length === 0) {
                promises.push(store.dispatch('portfolio/fetchPortfolio'));
            }
            if(store.getters['options/getOptions'].length === 0) {
                promises.push(store.dispatch('options/fetchOptions'));
            }
            let data = await Promise.all(promises);
            console.log(data);
        } catch (e) {
            console.log(e);
        }
    },
    components: { HomeContacts, PortofolioSlider, Clients, ChiSiamo, Solutions, HomeIntro }
}

为方便起见，这可以程序化如下：

export default {
    async fetch({ store }) {
        try {
            let paths = [
                { get: 'home/home',              fetch: 'home/fetchHome' },
                { get: 'solutions/getSolutions', fetch: 'solutions/fetchSolutions' },
                { get: 'tipo/getTipo',           fetch: 'tipo/fetchTipo' },
                { get: 'portfolio/getPortfolio', fetch: 'portfolio/fetchPortfolio' },
                { get: 'options/getOptions',     fetch: 'options/fetchOptions' }
            ];
            let promises = paths.filter(p => store.getters[p.get].length === 0).map(p => store.dispatch(p.fetch));
            let data = await Promise.all(promises);
            console.log(data);
        } catch (e) {
            console.log(e);
        }
    },
    components: { HomeContacts, PortofolioSlider, Clients, ChiSiamo, Solutions, HomeIntro }
}

在代码的其他地方定义 paths 数组并将其传递给简化的 fetch() 可能更有意义，给它配置文件 :

    fetch({ store, paths })

如果还是不行，那是你有什么事情没有告诉我们。

如何在 nuxt fetch 中使用一些 dispatch？

How to use a few dispatch in nuxt fetch?

fetch

promise

nuxt.js