Как удалить пост? Сейчас удаляет все посты почему то... Я удаляю пост по уникальному 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
}
}
})
Important: resource will not be really updated on the server but it will be faked as if.