Nuxt 等待异步 + vuex

Question

我正在使用 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 说，等待加载页面？

Answer 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 
}

Answer 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})
}