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

Question

我有一个列出来自数据库的维护请求的 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 路由器

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

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

Answer 1

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

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

否则每次都会继续添加数据。

Answer 2

我认为你可以在你的 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. 最后一点是你不需要 set ...data，因为这没有意义。 ...当您使用它时，您将复制所有数据。有些人是这样想的：

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]

想一想。