Удалить post (rest api delete)?

Question

Как удалить пост? Сейчас удаляет все посты почему то... Я удаляю пост по уникальному id

<div class="post" v-for="(post, i) in allPosts">
    <p>{{post.id}}</p>
    <p>{{post.title}}</p>
    <p>{{post.body}}</p>
    <button @click="deletePost(post.id)">Delete POST</button>
</div>

    import {mapGetters, mapActions} from 'vuex'
    export default {
        name: 'Home',
        data() {
            return {
                posts: []
            }
        },
        computed: mapGetters(["allPosts"]),
        methods: {
            ...mapActions(["fetchPosts"]),
            deletePost: function (id, i) {
                fetch('https://jsonplaceholder.typicode.com/posts/' + id, {
                    method: 'DELETE'
                })
                    .then((data) => {
                        // this.posts = data
                        this.$store.state.posts = data
                        console.log('delete')
                    })
            }
        },
        async mounted() {
            this.fetchPosts()
        }
    }


  export default new Vuex.Store({
  state: {
    posts: []
  },
  mutations: {
    updatePost(state, posts) {
      state.posts = posts
    }
  },
  actions: {
    async fetchPosts(ctx) {
      const res = await fetch(
          'https://jsonplaceholder.typicode.com/posts'
      )
      const posts = await res.json()
      ctx.commit('updatePost', posts)
    }
  },
  getters: {
    allPosts(state) {
      return state.posts
    }
  }
})

Answer 1

Он не "удаляет все посты", просто запрос DELETE не возвращает список постов, как вы ожидаете.

Вместо полной замены списка постов, можно отфильтровать тот, что вы удалили:

.then(() => {
    // this.posts = 
    //   this.posts.filter(p => p.id !== id)
    this.$store.state.posts = 
        this.$store.state.posts.filter(p => p.id !== id)
})

Второй вариант, более надёжный - заново выполнить запрос получения списка постов. Но тот бэкенд, чтто вы используете, не поддерживает модификацию серверных данных. Он только для простой проверки запросов.

БЛОГ НА HUSL

Удалить post (rest api delete)?

Ответы (1 шт):