Vue.js 2 Web Development Projects

Store changes for post selection and sending

1. Add a selectedPostDetails data property in the state and add the corresponding getter and mutation:

      state () {        return {          // ...          // Fetched details for the selected post          selectedPostDetails: null,        }      },      getters: {        // ...        selectedPostDetails: state => state.selectedPostDetails,      },      mutations: {        // ...        selectedPostDetails (state, value) {          state.selectedPostDetails = value        },      },

2. In the selectPost, fetch the details with a request to the /post/<id> route on the server:

      async selectPost ({ commit }, id) {        commit('selectedPostDetails', null)        commit('selectedPostId', id)        const details = await $fetch(`posts/${id}`)        commit('selectedPostDetails', details)      },

3. Also add a new unselectPost action:

 unselectPost ...