业务场景：
多个页面调用同一个接口 作为下拉框的选项数据，接口返回上千条 导致页面异常卡顿
解决办法：
使用Select V2 虚拟列表选择器
代码示例：
<el-form-item label="场所名称"> <el-select-v2 class="row-inp" v-model="queryForm.id" :options="placeData" clearable filterable placeholder="请选择场所"> </el-select-v2> </el-form-item>
这里由于多个页面使用 所以将数据请求放在了vuex actions 中 ，具体代码如下：
页面获取getters
const placeData = computed(() => store.getters.getPlaceDataList)
如果数据为空 则做异步请求
if (placeData.value.length <= 0) {
store.dispatch('getPlaceData')
}
vuex 代码示例：
在store 中创建modules下创建global.js
mport { queryHotelGroupBrands } from '@/api/placeManager/index.js'
import { queryHotelName } from '@/api/reportManage/index.js'
const state = () => ({
language: 'zh', //国际化语言
groupData: [], //集团、
placeData: [] //场所
})
const mutations = {
setGlobalLanguage(state, payload) {
state.language = payload
},
setGroupData(state, payload) {
state.groupData = payload
},
setPlaceData(state, payload) {
state.placeData = payload
}
}
const actions = {
async getGroupData({ commit }) {
await queryHotelGroupBrands({ level: 1 }).then(res => {
commit('setGroupData', res.data)
})
},
async getPlaceData({ commit }) {
await queryHotelName().then(res => {
commit('setPlaceData', res.data)
})
}
}
const getters = {
getPlaceDataList(state) {
if (state.placeData.length > 0) {
return state.placeData.map(item => ({
value: item.hotelId,
label: item.hotelName
}))
} else {
return []
}
},
getPlaceNameData(state) {
return state.placeData.map(item => ({
value: item.hotelName,
label: item.hotelName
}))
}
}
export default {
state,
mutations,
actions,
getters
}
在 vuex 下的index 导出global.js
import { createStore } from 'vuex'
import account from './modules/account'
import menu from './modules/menu'
import map from './modules/map'
import size from './modules/size'
import global from './modules/global'
export default createStore({
modules: {
account,
menu,
map,
size,
global
}
})
以上即可