스토어 fake api 배열에서 새 항목 이동 해제

스토어 fake api 배열에서 새 항목 이동 해제

Add. 버튼을 클릭한 후 작업 배열의 맨 위에 새 작업관리 제목을 시각화할 예정입니다.POST 요청 페이크 API로 하고 있는데 404 오류가 발생하여 페이지에 추가할 작업이 보이지 않습니다.콘솔에 새 작업 개체가 표시되는 경우에도 마찬가지입니다.

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);
}
    },

404가 아니라 400인데, 이는 고객 측의 실수를 의미합니다.브라우저 개발 도구의 네트워크 탭을 보면 dummyjson.com 의 응답은 다음과 같습니다.

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

문서를 확인해보니, https://dummyjson.com/docs/todos#add, 그것은 그것을 보여줍니다.userId요청 단체의 일원으로서.

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

반면에 당신의 요청은.id대신에userId또한 jsondummy.com 에는 1 - 100 범위의 사용자 ID만 있습니다.해당 범위를 벗어나는 사용자 ID를 보내면 또 다른 오류가 발생합니다.

오타와 관련된 다른 문제가 하나 더 있습니다.'Content-Type': 'appication/json;charset=utf-8',응용 프로그램이 응용 프로그램이 되어야 하는 곳

업데이트된 작업 스택 블리츠

언급URL : https://stackoverflow.com/questions/76184545/unshift-a-new-item-in-the-store-fake-api-array