Objetivo : forma más rápida de autocompletar

Situación : uso vue js, cuando abro la página, ejecuto en montado ()

 axios.get('http://127.0.0.1:3000/games/all') .then(res=>{ this.$store.state.games = res.data; this.$store.dispatch('GetGames',res.data); }) .catch(err=>console.log(err))

axios obtiene juegos/todo es

 router.get('/all',(req,res,next)=>{ let responseData = {}; Game.find({},(err,rows)=>{ if(err) throw err; if(rows.length) { responseData.result = 1; responseData.data = rows; }else{ responseData.result = 0; } res.json(responseData.data); // console.log(responseData.data); }); })

Tengo un archivo json como

 { { gamename:"agricola", maxplayer:4, minplayer:1, mintime:20, maxtime:90, difficulty:"hard", } }

Hay 200~300 columnas.

usando vuex

 state: { games:"", }, mutations: { getGames(state,payload){ state.games = payload; console.log("받아온 게임",state.games); }, } GetGames:({commit},payload)=>{ commit('getGames',payload) },

Cuando traigo db, uso el estado en el archivo store.js, así que uso autocompletar

 const autocomplete = document.querySelector(".autocomplete"); if (this.gameInput) { this.result = this.games.filter((game) => { return game.gamename.match(new RegExp(this.gameInput, "i")) }); } else { autocomplete.classList.add("disabled"); }

el gameInput es tu escritura

Problema : lleva demasiado tiempo traer la base de datos (4000ms~) y los datos se almacenan en el almacenamiento local. Incluso después de recibir los datos, no puedo buscar a menos que los actualice. por lo tanto, el usuario debe quedarse hasta que traiga la base de datos, y el usuario no puede buscar el juego hasta que actualice la página. Quiero que no necesiten actualizar mi página. gracias por leer mi pregunta lo siento por mi pobre inglés (lágrima)