Nuxt 等待异步 + vuex

Posted 2023-02-23

【中文标题】Nuxt 等待异步 + vuex

【英文标题】：Nuxt await async + vuex

【发布时间】：2021-11-01 04:22:47

【问题描述】：

我正在使用 nuxt 和 vuex。在 vuex 中获取数据：

actions: 
    get_posts(ctx) 
      axios.get("http://vengdef.com/wp-json/wp/v2/posts").then(post => 
        let posts = post.data;


        if (!posts.length) return;

        let medias_list = "";
        posts.forEach(md => 
          medias_list += md.featured_media + ","
        );
        medias_list = medias_list.slice(0, -1);


        let author_list = "";
        posts.forEach(md => 
          author_list += md.author + ","
        );
        author_list = author_list.slice(0, -1);


        axios.all([
          axios.get("http://vengdef.com/wp-json/wp/v2/media?include=" + medias_list),
          axios.get("http://vengdef.com/wp-json/wp/v2/users?include=" + author_list),
          axios.get("http://vengdef.com/wp-json/wp/v2/categories"),
        ]).then(axios.spread((medias, authors, categories) => 

          ctx.commit("set_postlist", medias, authors, categories );

        )).catch((err) => 
          console.log(err)
        );


      )
    
  ,

在 vuex 状态下，我有来自下面的 exaple 的动态 postlist。 我如何在 Nuxt 中使用它？

在 nuxt 我知道 async fetch 和 asyncData。

async fetch () 
    this.$store.dispatch("posts/get_posts");

那不行。

在 vuex 操作加载所有数据之前，我如何对 nuxt 说，等待加载页面？

【问题讨论】：

等待这个。$store.dispatch("posts/get_posts");也许就足够了

【参考方案1】：

正如你已经提到的，有：

获取挂钩 异步数据

并且差异已经很好地描述了here

您的代码不起作用的原因可能在于您的商店操作。 它应该返回一个promise，尝试在axios get方法之前添加return ->

get_posts(ctx) 
      return axios.get(...
    // ...

然后，在您的页面上：

async fetch () 
    await this.$store.dispatch("posts/get_posts");

另外，在上面的评论中你说你不想在存储中提交数据：

...仅在 vuex 之后加载页面，我不需要在 vuex 中传递数据

但是你用这一行来做：

ctx.commit("set_postlist", medias, authors, categories );

如果您不想保存数据，只需将上面的行替换为：

return Promise.resolve( medias, authors, categories )

并在您的页面上获取它：

async fetch () 
    this.posts = await this.$store.dispatch("posts/get_posts");
    // now you can use posts in template 

【参考方案2】：

误读了实际问题，因此更新

使用 Nuxt，您可以使用 asyncData()，但语法会有所改变，并且渲染将完全阻塞，直到所有调用完成。

或者使用fetch() 和一些skeletons 的组合来实现平滑过渡（也就是不阻塞渲染），或者使用带有$fetchState.pending 助手的加载器。

更多信息可以在这里找到：https://nuxtjs.org/docs/2.x/features/data-fetching#the-fetch-hook

---

旧的（不相关的）答案

如果你想将参数传递给你的 Vuex 动作，你可以这样调用它

async fetch () 
  await this.$store.dispatch('posts/get_posts', variableHere)

在 Vuex 中，访问它就像

get_posts(ctx, variableHere) 

你可以在下面使用。

---

PS：尝试在任何地方使用async/await。

PS2：另外，你可以直接用类似这样的方式 destructure 上下文

get_posts( commit , variableHere) 
  ...
  commit('set_postlist', medias, authors, categories)

【讨论】：

这不是我需要的原因，请阅读帖子。在 vuex 获取数据之前，我需要说 nuxt wait。并且只在 vuex 之后加载页面，我不需要在 vuex 中传递数据

@ЕвгенийВенеград 如果你想拥有fetch() 和阻塞的东西，你需要将你的获取逻辑导出到middleware。这应该可以正常工作。