Vue.js 2 Web Development Projects

Store changes for comments

Before going into functional components, we need to lay the groundwork in the Vue

1. In the posts Vuex module, we need a new mutation that will add a comment to a post directly:

      addComment (state, { post, comment }) {        post.comments.push(comment)      },

2. Add the new sendComment action too that sends a query to the server to the /posts/<id>/comment route and adds it to the selected post:

      async sendComment({ commit, rootGetters }, { post, comment }) {        const user = rootGetters.user        commit('addComment', {          post,          comment: {            ...comment,            date: new Date(),            user_id: user._id,            author: user,          },        })        await $fetch(`posts/${post._id}/comment`, {          method: 'POST',

          body: JSON.stringify(comment),        })      },

We use rootGetters from the action ...