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 中做一些小改动,我会建议一些选项,然后你看看哪个对你更好,好吗?
- 首先更改的是检查状态是否存在,然后忽略请求,如下所示:
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)
}
}
- 另一件事是你的突变,这将你的请求推送到 state.maintenance_requests,这意味着你将把所有新的项目附加到一个现有的项目中。所以,如果你需要替换所有值,那么我建议你更新你的变异,这样的事情:
mutations: {
PUSH_MAINTENANCES (state, data) {
state.maintenance_requests = 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]
想想。
我有一个列出来自数据库的维护请求的 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 中做一些小改动,我会建议一些选项,然后你看看哪个对你更好,好吗?
- 首先更改的是检查状态是否存在,然后忽略请求,如下所示:
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)
}
}
- 另一件事是你的突变,这将你的请求推送到 state.maintenance_requests,这意味着你将把所有新的项目附加到一个现有的项目中。所以,如果你需要替换所有值,那么我建议你更新你的变异,这样的事情:
mutations: {
PUSH_MAINTENANCES (state, data) {
state.maintenance_requests = 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]
想想。