Recently, I've been facing an issue with my store where I'm encountering a null value intermittently on certain values. If someone could provide some guidance and explain what might be causing this inconsistency, I would greatly appreciate it. Here's the scenario: sometimes my store.getters.getApiKey returns an empty string "", while other times it doesn't.
For example, in the Vue component below, the first reference to
{{this.$store.getters.getApiKey}}{{this.$store.getters.getApiKey}}However, within the mounted section of the component, even after setting store.getters.getHostUrl, store.getters.getApiKey continues to return an empty string "".
Here are some specifics:
the Component.vue
<template>
<div class="countryCodes">
<p>ApiKey : {{this.$store.getters.getApiKey}}</p>
<p>CountryCode Data is {{ page }}</p>
<div class="CountryCodes">
<tr v-for="ccdata in content_list" v-bind:key="ccdata.guid">
<td>{{ ccdata.guid }}</td>
<td>{{ ccdata.name }}</td>
<td>{{ ccdata.code }}</td>
</tr>
</div>
</div>
</template>
import axios from "axios";
import store from "@/store";
export default {
name: 'CountryCodes',
data () {
return {
page: "",
content_list: []
}
},
mounted () {
axios({ method: "GET", "url": store.getters.getHostUrl + "
"/api/"+store.getters.getApiKey+"/countryCodes" }).then(result => {
this.page = result.data.page;
this.content_list = result.data.contents;
}, error => {
console.error(error);
});
},
methods: {
}
}
</script>
The configuration of my store (store.js) is as follows...
import Vuex from "vuex";
import Vue from 'vue';
Vue.use(Vuex)
export default new Vuex.Store({
state: {
apiKey: "",
hostUrl:""
},
mutations: {
SET_APIKEY(state, value) { state.apiKey = value; },
SET_HOST_URL(state, value) {state.hostUrl = value; }
},
getters: {
getApiKey(state) { return state.apiKey; },
getHostUrl(state) { return state.hostUrl; }
}
})
Lastly, in my main.js file, I commit the data changes to the store...
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store.js'
new Vue({
el: '#app',
render: h => h(App),
router,
store,
mounted: function() {
console.log(this.$route.query)
store.commit('SET_APIKEY', this.$route.query.api)
store.commit("SET_HOST_URL", location.origin.toString())
}
})
I'm also experiencing a similar problem when trying to construct an HTTP service, as the store appears to be returning a null value for the apikey. Any ideas on what might be causing this inconsistency?