Vue Router中切换路由导致数据重复

Switching route in Vue Router causes data to duplicate

我有一个列出来自数据库的维护请求的 Vue 组件。

<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>

这是我的 Vuex 商店

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)
        }
     }

},

以上代码输出维护列表如下:

{"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" },

我也在使用 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'

    },

]

问题是,每次我切换路线。例如从维护表格到维护请求列表,我得到了一份维护请求的副本。

而不是得到这个:

{"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" },

并且对于后续的每一次路由切换,它都会继续复制。

{"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" },

如何消除这种重复?谢谢。

您正在推送到一个数组而不是设置它。试试这个:

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

否则每次继续添加数据

我想你可以在你的 vuex 中做一些小改动,我会建议一些选项,然后你看看哪个对你更好,好吗?

  1. 首先更改的是检查状态是否存在,然后忽略请求,如下所示:
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)
  }
}
  1. 另一件事是你的突变,这将你的请求推送到 state.maintenance_requests,这意味着你将把所有新的项目附加到一个现有的项目中。所以,如果你需要替换所有值,那么我建议你更新你的变异,这样的事情:
mutations: {
  PUSH_MAINTENANCES (state, data) {
    state.maintenance_requests = data
  },
},
  1. 最后一点是您不需要设置...数据,因为这没有意义。 ...当您使用它时,您将复制所有数据。有些人是这样想的:
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]

想想。