Vue2 + Vuex - not rendering array that is set successfully in store - vue.js

Question

I am trying to render 209,579 options and I think that I am not using Vuex lifecycle + axios correctly
I see all options set in store state via Vuex in console.
No errors are displayed
Options are empty and not rendering the state cityNamesarray
main.js is exporting store to all components
I think I am not applying this lifecycle correctly, where I should use getters here, can someone bring order to my lifecycle?
store.js
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
isTrue: true,
cityNames: [],
},
getters:{
getCityNames(state){
return state.cityNames;
}
},
mutations: {
SetCityNames(state, cityNames){
state.cityNames = cityNames
},
actions: {
loadData({commit}){
axios.get('http://localhost:3000/allCities')
.then(function (response) {
commit('SetCityNames', response.data)
}).catch(function (error) {
console.log(error);
});
}
},
});
script
export default {
name: "Weather",
methods: {
allCityNames() {
this.$store.dispatch('loadData')
}
},
created() {
this.allCityNames();
}
}
template
<select>
<option disabled value="">Please select one</option>
<option v-for="cityName in $store.cityNames">{{cityName}}</option>
</select>
Thanks,
Bud

Answer 1

I have changed my code to be executed from compute, only to find out the error (at last!) which was: maximum stacksize exceeded, at this point I understood that Vue is not letting me render such a huge array (209,579 items) into view.
part I - Code Change:
I have created an isLoaded state that is set to true once axios commits it's response,
I'm still not sure if this is the best method due to the async nature of axios's call, it could have not finished with commit('SetCityNames', response.data); and right after invoking the commit, it would invoke the next : commit('changeLoadedState');
so i've added to state:isLoaded: false
added a getter: didItLoad(state){return state.isLoaded}
added a mutation: changeLoadedState(state){state.isLoaded = true}
added a commit (commit('changeLoadedState');) to my axios call in actions:
loadData({commit}) {
axios.get('http://localhost:3000/allCities')
.then(function (response) {
commit('SetCityNames', response.data);
commit('changeLoadedState');
}).catch(function (error) {
console.log(error);
});
}
In my component I am still dispatching the axios call in methods since it being called first, and added a computed method for the render side, as follows:
computed:{
isLoaded(){
return this.$store.getters.didItLoad;
},
renderCities(){
return this.$store.getters.getCityNames;
}
}
In My rendered template I first check with my select the loaded status and only then populate the options:
<select v-if="isLoaded">
<option disabled value="">Please select one</option>
<option v-for="cityName in renderCities">{{cityName}}</option>
</select>
Part II - Change Payload Size
So after setting my code straight, I went into my node express server and changed my route's loop to stop at 1000 items, and all worked great.
At this point I was curious what happens what happens if I start adding zeroes, so at 10K items, takes 1-2 sec to load options, opening the dropdown starts to show signs of latency due to stress, at 50K items it takes around 5 seconds to open the dropdown.
Bottom Line
The issue is not the size of the array, Vuex works amazing, getting a 209,579 item array in ~800ms which included backend parsing by Express.js (my whole stack is local so no network latency).
I will try to create an autocomplete that would start listing from 2nd or 3rd character.
Thanks to replying members.

Answer 2

You have a getters named getCityNames.It is $store.getters.getCityNames not $store.cityNames.
So change
<option v-for="cityName in $store.cityNames">{{cityName}}</option>
to
<option v-for="cityName in $store.getters.getCityNames">{{cityName}}</option>
it would be better to refactor to use a computed property rather than inlining in the template.
<option v-for="cityName in cityNames">{{cityName}}</option>
//script
computed: {
cityNames() {
return this.$store.getters.getCityNames;
}
}