我的Vue应用程序有一个搜索页面，用户输入查询并从后端获取与查询相关的发布数据。发布数据存储在Vuex存储中的对象中，存储中的每个发布都显示在搜索页面上。
我的问题是，一旦用户第一次搜索并得到他们的结果(平均300多个搜索结果)，第二次搜索查询的输入就会超级慢。我知道这个问题与我的商店中的对象数量有关，因为每当第一次搜索使用一个真正唯一的搜索查询并且返回的结果较少时，我就不会遇到这个问题。
对我来说，应用程序会被这么多的数据所困扰，这似乎很奇怪。在您的Vuex状态下存储一堆数据时，是否有任何保持应用程序平稳运行的最佳实践/技巧?对Vue很陌生，所以任何建议都会很有帮助。
import Vue from 'vue'
import Vuex from 'vuex'
import user from './Modules/user.js'
import createPersistedState from 'vuex-persistedstate'
import { fetchReviewersBySearch, } from '../api/index.js'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
currentSearchReviewers: [],
aPublications: {},
bPublications: {},
cPublications: {},
dPublications: {},
ePublications: {},
ePublications: [],
fPublications: {},
fReviewers: [],
dReviewers: [],
aReviewers: [],
bReviewers: [],
cReviewers: [],
},
actions: {
getReviewersBySearch (context, { searchQuery }) {
return fetchReviewersBySearch(searchQuery)
.then((response) => context.commit('setSearchReviewers', { reviewers: response.data }))
},
modules: {
user
},
plugins: [createPersistedState()],
mutations: {
setSearchReviewers (state, payload) {
// Payload data is a mix publication and reviewer data.
// If publication data, puts into correct object based on publication type.
if (payload.reviewers.a_publications) {
state.aPublications = Object.assign(payload.reviewers.a_publications)
delete payload.reviewers.a_publications
}
if (payload.reviewers.b_publications) {
state.bPublications = Object.assign(payload.reviewers.b_publications)
delete payload.reviewers.b_publications
}
if (payload.reviewers.c_publications) {
state.cPublications = Object.assign(payload.reviewers.c_publications)
delete payload.reviewers.c_publications
}
if (payload.reviewers.d_publications) {
state.dPublications = Object.assign(payload.reviewers.d_publications)
delete payload.reviewers.d_publications
}
if (payload.reviewers.e_publications) {
state.ePublications = Object.assign(payload.reviewers.e_publications)
delete payload.reviewers.e_publications
}
if (payload.reviewers.f_publications) {
state.fPublications = Object.assign(payload.reviewers.f_publications)
delete payload.reviewers.f_publications
}
//For the reviewer data within the payload, adds each reviewer to an array matching their corresponding publications
for (const entry in payload.reviewers) {
if (payload.reviewers[entry].a_id) {
state.aReviewers.push(payload.reviewers[entry])
}
if (payload.reviewers[entry].c_id) {
state.cReviewers.push(payload.reviewers[entry])
}
if (payload.reviewers[entry].b_id) {
state.bReviewers.push(payload.reviewers[entry])
}
if (payload.reviewers[entry].d_id) {
state.dReviewers.push(payload.reviewers[entry])
}
if (payload.reviewers[entry].e_id) {
state.ePublications.push(payload.reviewers[entry])
}
if (payload.reviewers[entry].f_id) {
state.fReviewers.push(payload.reviewers[entry])
}
}
// Sorts the reviewer arrays based on the number of publications associated with each reviewer.
state.aReviewers.sort(function (a, b) { return b.publications.length - a.publications.length })
state.bReviewers.sort(function (a, b) { return b.publications.length - a.publications.length })
state.cReviewers.sort(function (a, b) { return b.publications.length - a.publications.length })
state.dReviewers.sort(function (a, b) { return b.publications.length - a.publications.length })
state.ePublications.sort(function (a, b) { return b.publications.length - a.publications.length })
state.fReviewers.sort(function (a, b) { return b.publications.length - a.publications.length })
//Keeps the top 50 reviewers of each publication type
if (state.aReviewers.length > 50) {
state.aReviewers.length = 50
}
if (state.bReviewers.length > 50) {
state.bReviewers.length = 50
}
if (state.cReviewers.length > 50) {
state.cReviewers.length = 50
}
if (state.peregrineReviewers.length > 50) {
state.cReviewers.length = 50
}
if (state.dReviewers.length > 50) {
state.dReviewers.length = 50
}
if (state.ePublications.length > 50) {
state.ePublications.length = 50
}
if (state.fReviewers.length > 50) {
state.fReviewers.length = 50
}
//Combines all the reviewer arrays into one and then empties the publication-specific arrays
state.currentSearchReviewers = state.aReviewers.concat(state.bReviewers, state.cReviewers, state.dReviewers, state.eReviewers, state.fReviewers)
state.aReviewers = []
state.bReviewers = []
state.cReviewers = []
state.dReviewers = []
state.eReviewers = []
state.fReviewers = []
}
}
}
})
编辑:典型数据流
用户将输入一个搜索查询，然后传递到后端，在那里我有几个函数调用不同的api来返回一个包含所有搜索结果的json对象。
json对象键/值对要么与六个出版物(a、b、c、d、e、f)中的一个相关，要么与这些出版物对应的审稿人相关。虽然只有6个键/值对对应于出版物(每个出版物一个键/值对)，但每个出版物可以有多达200-300个审稿人键/值对。因此，作为一个示例，一个json对象将包含6个发布键/值对和600个审阅者键/值对(每个发布100个)。
在获得这个json对象之后，发生setsearch评论者突变。在突变中，我首先从json对象中获取6个发布键/值对，将它们放入状态，然后从json中删除它们。然后我遍历并将每个审稿人的键/值对放入与其出版物相对应的数组中。
将所有审阅者放入正确的数组后，然后根据审阅者的特定属性值对它们进行排序。排序完成后，将修改数组，以便每个数组只保留前50个结果。最后，将所有数组组合成一个大数组，作为搜索结果显示。
我意识到速度变慢是因为我在同一页面上为所有数百个搜索结果呈现UI元素。当我减少UI元素的数量时(不改变存储中的任何数据)，搜索页面并没有变慢。
为了解决这个问题，我所做的就是添加一个分页元素，在任何给定的时间只在页面上呈现10个结果。