Switching route in Vue Router causes data to duplicate

Question

I have a Vue component that lists maintenance requests from the database.

<template>
    <div>
      {{ maintenance_requests }}
    </div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex'

export default {


    computed: {
        ...mapGetters({
            maintenance_requests: 'maintenance/maintenances',
        }),


    },

    methods: {
        ...mapActions({
            getMaintenanceRequests: 'maintenance/getMaintenanceRequests',
        }),

    },

    mounted () {
        this.getMaintenanceRequests()


    }

}
</script>

This is my Vuex store

import axios from 'axios'

export default {

    namespaced: true,

    state:{
       maintenance_requests: [],
   },

   getters:{
       maintenances (state) {
            return state.maintenance_requests.sort((a,b) => b.date_created - a.date_created)
        },

   mutations:{
       PUSH_MAINTENANCES (state, data) {
            state.maintenance_requests.push(...data)
        },

   actions:{

      async getMaintenanceRequests ({ commit }) {
            let response = await axios.get('/api/maintenance/requests')

            commit('PUSH_MAINTENANCES', response.data.data)
        }
     }

},

The above code outputs a list of maintenances as follows:

{"maintenance_id": 1, "type": "Water problems", "Description": "I have had no water for 2 days now" },
{"maintenance_id": 2, "type": "Electricity problems", "Description": "My bulb is faulty" },
{"maintenance_id": 3, "type": "Roof problems", "Description": "My roof, in the guest bedroom is leaking" },

I'm also using Vue Router

import AppMaintenanceForm from './components/maintenance/AppMaintenanceForm.vue'
import AppListMaintenanceRequests from './components/maintenance/AppListMaintenanceRequests.vue'

export const routes = [
    {
        path: 'list/maintenance/requests',
        component: AppListMaintenanceRequests,
        name: 'ListMaintenanceRequests'

    },

     {
        path: '/maintenance/form',
        component: AppMaintenanceForm,
        name: 'MaintenanceForm'

    },

]

And the problem is, every time I switch a route. For example from the maintenance form to the listing of maintenance requests, I get a duplicate of the maintenance requests.

Instead of getting this:

{"maintenance_id": 1, "type": "Water problems", "Description": "I have had no water for 2 days now" },
{"maintenance_id": 2, "type": "Electricity problems", "Description": "My bulb is faulty" },
{"maintenance_id": 3, "type": "Roof problems", "Description": "My roof, in the guest bedroom is leaking" },

I get this:

{"maintenance_id": 1, "type": "Water problems", "Description": "I have had no water for 2 days now" },
{"maintenance_id": 2, "type": "Electricity problems", "Description": "My bulb is faulty" },
{"maintenance_id": 3, "type": "Roof problems", "Description": "My roof, in the guest bedroom is leaking" },
{"maintenance_id": 1, "type": "Water problems", "Description": "I have had no water for 2 days now" },
{"maintenance_id": 2, "type": "Electricity problems", "Description": "My bulb is faulty" },
{"maintenance_id": 3, "type": "Roof problems", "Description": "My roof, in the guest bedroom is leaking" },

and for every subsequent switching of a route, it continues to duplicate.

{"maintenance_id": 1, "type": "Water problems", "Description": "I have had no water for 2 days now" },
{"maintenance_id": 2, "type": "Electricity problems", "Description": "My bulb is faulty" },
{"maintenance_id": 3, "type": "Roof problems", "Description": "My roof, in the guest bedroom is leaking" },
{"maintenance_id": 1, "type": "Water problems", "Description": "I have had no water for 2 days now" },
{"maintenance_id": 2, "type": "Electricity problems", "Description": "My bulb is faulty" },
{"maintenance_id": 3, "type": "Roof problems", "Description": "My roof, in the guest bedroom is leaking" },
{"maintenance_id": 1, "type": "Water problems", "Description": "I have had no water for 2 days now" },
{"maintenance_id": 2, "type": "Electricity problems", "Description": "My bulb is faulty" },
{"maintenance_id": 3, "type": "Roof problems", "Description": "My roof, in the guest bedroom is leaking" },

How do I get rid of this duplication? Thanks.

Answer 1

I think you can make some little changes in your vuex, I'll sugest some options, then you check what is better to you all right?

1. The first changed is check if the state exist, then ignore the resquest some thing like this:

actions: {
  async getMaintenanceRequests ({ commit, state }) {
    if(state.maintenance_requests.length) return // this will ignore that maintenence is length > 0
    let response = await axios.get('/api/maintenance/requests')
    commit('PUSH_MAINTENANCES', response.data.data)
  }
}

2. Another thing is your mutation, this push your request inside state.maintenance_requests, this means that you'll append all new the items together a exists items. So, if you need replace the all values, then I recommend to you update your mutation for some thing like this:

mutations: {
  PUSH_MAINTENANCES (state, data) {
    state.maintenance_requests = data
  },
},

3. And the last is you don't need set ...data, becouse this don't make sense. ... when you use this, you'll duplicate all your data. some think like this:

This means that the code below will result in you having an array with duplicate elements.
const numbers1 = [1, 2, 3, 4, 5];
const numbers2 = [ ...numbers1, 1, 2, 6,7,8]; // this will be [1, 2, 3, 4, 5, 1, 2, 6, 7, 8]

think about.

Answer 2

You are pushing to an array instead of setting it. Try this:

PUSH_MAINTENANCES (state, data) {
   state.maintenance_requests = data;
}

Otherwise it continues to add data each time.