I'm building a Vue application which makes requests to an REST-API.
I want to use "useAxios" from vueuse to make theese requests like below:
const {data: todosList, isLoading, error, execute} = useAxios("/myapi/todos", {method: "GET"})This is used inside a Pinia store and works like expected. But now I want to use the same approach to delete an todo item using it's id. The API allows this by doing a delete request to "/myapi/todos/5", where 5 is the id of the todo item. To achieve this my Pinia store has a function "deleteTodo" which takes the todo as an argument. One solution would look like this:
function deleteTodo(todo){ const {data, isLoading, error, execute} = useAxios("/myapi/todos/" + todo.id, {method: "DELETE"}).then(() => {todosList.value.splice(todosList.value.indexOf(team), 1)})}Problem here is, that I can't return isLoading and error from pinia store to use them inside my component.
A different approach would be to prepare the request in advanced (outside the deleteTodo function) and call execute inside the function:
const {data, isLoading, error, execute} = useAxios("/myapi/todos/", {method: "DELETE"}, {immediate: false})function deleteTodo(todo){ execute().then(() => {todosList.value.splice(todosList.value.indexOf(todo), 1)}); // will not work becaus the todo id is missing in the url }Which will not work, because now the todo id is missing in the url.
A third approach is to prepare the request without an url and pass the url on execute:
const {data, isLoading, error, execute} = useAxios({method: "DELETE"}, {immediate: false})function deleteTodo(todo){ execute("/myapi/todos/" + todo.id).then(() => {todosList.value.splice(todosList.value.indexOf(todo), 1)}); // build the complete url with the todo id right on execute}This will fullfill all my needs but is in my opinion not very elegant, because the request definition is split up in two separate parts.
Question
Is there a way to prepare the statement with the url and only append the todo id to the predefined url when calling execute? Something like this:
const {data, isLoading, error, execute} = useAxios("/myapi/todos/", {method: "DELETE"}, {immediate: false})function deleteTodo(todo){ execute({urlSuffix: todo.id}).then(() => {todosList.value.splice(todosList.value.indexOf(todo), 1)}); // just append the todo id on execute}