unshift a new item in the store fake api array

Question

I'm expecting to visualize a new task todo title at the top of the tasks array after clicking the Add. button. I'm doing it with POST request fake API, but having the error 404 and I can't see the added todo on the page. Even though I get the new task object in the console.

https://stackblitz.com/edit/nuxt-bootstrap-vue-dynamic-img-bkwixg?file=pages%2Findex.vue,store%2Findex.js,components%2FTask.vue

// Store

const actions: {

const res = await fetch('https://dummyjson.com/todos/add', {
    method: 'POST',
    headers: {
      'Content-Type': 'appication/json;charset=utf-8',
    },
    body: JSON.stringify(data),
  });
  if (res.ok) {
    let result = await res.json();
    context.commit('addnewTask', result);
  }
  return res.ok;
},
}
export const mutations = {
  addnewTask(state, newTask) {
    state.tasks.unshift(newTask);
  },
}

// Child component

<template>
    <div class="create-new">
      <input
        type="text"
        v-model="todo"
        @keypress.enter="addTask"
        placeholder="add task"
      />
      <button @click="addTask">Add</button>
    </div>
    <div class="tasks">
      <Task v-for="task in tasks" :key="task.id" :task="task" />
    </div>
  </main>
</template>

<script>
export default {
  data() {
    return {
      todo: '',
      completed: false,

      search: '',
    };
  },
  computed: {
    tasks() {
      return this.$store.state.tasks;
    }
  methods: {
    addTask() {
      let newTask = {
        id: Math.floor(Math.random() * 25 + 200),
        todo: this.todo,
        completed: false,
      };
      if (newTask) {
        this.$store.dispatch('addTask', newTask);
}
    },

Answer 1

It's not a 404, it's a 400, which indicates some client side mistake. Looking at the network tab in the browser dev tools, the response from dummyjson.com has this:

{"message":"User id is required"}

Checking the docs, https://dummyjson.com/docs/todos#add, it does show a userId as part of the request body

body: JSON.stringify({
    todo: 'Use DummyJSON in the project',
    completed: false,
    userId: 5,
  })

whereas your request has id instead of userId. Also realize that jsondummy.com only has user ids in the range of 1 - 100. Sending any userId outside that range will generate another error.

You have one other issue involving a typo here: 'Content-Type': 'appication/json;charset=utf-8', where appication should be application

updated working stackblitz