Nuxt await async + vuex

Question

我使用next和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状态下，我从下面的例子中获得动态postlist。我如何在next中使用它?

在接下来我知道asyncfetch和asyncData。

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

不行

我怎么能说下一步，等待加载页面，在vuex动作加载所有数据之前?

Answer 1

正如你已经提到的，有:

• 取钩
• asyncData

这里很好地描述了差异

你的代码不工作的原因可能在你的store操作中。它应该返回一个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

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

对于next，您可以使用asyncData()，语法将改变一点，并且渲染将完全阻塞，直到所有调用完成。

或者使用fetch()和一些骨架的组合，使平滑过渡(又名不阻塞渲染)，或加载器与$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:同样，你也可以像这样直接解构上下文

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