ऐप इनिशियलाइज़ होने पर Vue में एन्वायरमेंट वैल्यू स्टोर करें

VueJS का उपयोग करके बनाए गए एक मूल वेब ऐप में एक एपीआई को कॉल किया जाता है जो पर्यावरण नाम वाले ऑब्जेक्ट के साथ प्रतिक्रिया करता है। उदाहरण के लिए:
https://appsdev/mysimpleapp/api/environment
रिटर्न
{"applicationName":"My Simple App","version":"1.0.0.0","environment":"DEV"}

वर्तमान में, यदि परिवेश DEV है, तो सशर्त रूप से दिखाने के लिए एक नेविगेशन बटन सेट किया गया है। यहाँ उस पृष्ठ के प्रासंगिक भाग हैं:

<template>
   <!-- other content here -->
   <div @click="updateMenu()" v-show="['DEV'].includes(environment)"><router-link :to="{name: 'dev-notes'}">Dev Notes</router-link></div>
</template>

<script>
// other logic here
data() {
    return {
        environment: null
    }
},
created() {
    this.getEnvironment();
},
methods: {
    async getEnvironment() {
        const environmentDetails = await this.$service.access('environment').get();  // uses Axios to access API
            this.environment = environmentDetails.environment;
        }
    }
}
</script>

जबकि यह दृष्टिकोण काम करता है, ऐप के एपीआई को हिट करते समय दिखाई देने वाले "देव नोट्स" एनएवी बटन में ध्यान देने योग्य देरी होती है। साथ ही, हर बार पेज लोड होने पर, एपीआई को एक कॉल आती है।

इस पर सुधार करने के लिए, ऐसा लगता है कि एपीआई को एक बार हिट करना बेहतर हो सकता है, जब ऐप शुरू होता है, तो उस मान को एक चर में कहीं स्टोर करें और फिर उस चर को सशर्त रूप से "देव नोट्स" एनएवी बटन दिखाने के लिए देखें। Vuex इतनी सरल चीज़ के लिए ओवरकिल जैसा लगता है और इस ऐप में .env फ़ाइलें नहीं हैं जो यह पोस्ट बताती है कि इसे कैसे हासिल किया जा सकता है?