Postagem assíncrona com VueJS e Axios - javascript, rest, api, vue.js, axios

Eu tenho os métodos e criei propriedades no VueJS

created() {
axios.get("/wp-json/wp/v2/users/" + portal.user.id + "?context=edit", {headers: {"X-WP-Nonce": portal.nonce}})
.then(response => {
this.user = response.data;
})
.catch(e => {
this.errors.push(e);
});

axios.get("/wp-json/wp/v2/categories")
.then(response => {
this.terms = response.data;
})
.catch(e => {
this.errors.push(e);
});
},

methods: {
createPost: function() {

let title = this.new_post_title;
let content = this.new_post_content;
let tags = this.new_post_tags;
let status = this.status;

let data = {
"title": title,
"content": content,
"status": status,
};

axios.post("/wp-json/wp/v2/posts/", data, {headers: {"X-WP-Nonce": portal.nonce}})
.then(response => {
console.log(response);
})
.catch(e => {
this.errors.push(e);
console.log(this.errors);
});

this.new_post_title = "";
this.new_post_content = "";
this.new_post_tags = "";
}
},

Tudo está funcionando com a solicitação, os dados estão sendo publicados no WordPress e, quando faço uma atualização da página, recebo a nova postagem na parte superior da página, como deveria.

Mas como faço para que a página carregue a nova postagem de forma assíncrona após a conclusão da solicitação?

Respostas:

Se sua postagem for criada com sucesso, isso significa que, se você fizer uma get solicitação para o endpoint das postagens, você obteriapostagem recém-criada. Como você faria com uma atualização de página. Portanto, meu objetivo é apenas inserir diretamente a nova postagem na página, no lado do cliente, após uma solicitação de postagem bem-sucedida. Não é necessário obter solicitação.

Não conheço a estrutura da hierarquia de componentes ou se você está usando o Vuex. Mas a partir do componente que criou a postagem, você $emit um evento que contém os novos dados da postagem.

createPost: function() {

let title = this.new_post_title;
let content = this.new_post_content;
let tags = this.new_post_tags;
let status = this.status;

let data = {
"title": title,
"content": content,
"status": status,
};

axios.post("/wp-json/wp/v2/posts/", data, {headers: {"X-WP-Nonce": portal.nonce}})
.then(response => {
console.log(response);
this.$emit("new-post",data)
})
.catch(e => {
this.errors.push(e);
console.log(this.errors);
});

this.new_post_title = "";
this.new_post_content = "";
this.new_post_tags = "";
}

O pai desse componente capturaria oevento, contendo os dados. Continue emitindo eventos ou passando adereços até chegar ao componente que exibe a lista. Quando você estiver no componente da lista, envie a nova postagem para a matriz de postagens, e ela aparecerá na página.