Quiero hacer una solicitud de búsqueda y asignar la respuesta de esa solicitud a alguna variable global a la que se pueda acceder desde cualquier lugar.

dashboard.vue En esta plantilla, quiero mostrar la lista, cuando hago clic en el elemento de la lista, me redirigirá a la página con los detalles del elemento.

 <template> <div class="main-dashboard-custom"> <div class="grid-box-custom-container"> <div class="grid-box-custom-item" v-for="item in this.$store.state.customJson" :key="item.id" > <router-link :to="`/dashboard/${item.id}`" bexioId="item.bexioId"> {{ item.title }} </router-link> </div> </div> </div> </template> <script> import axios from "@axios"; export default { components: {}, data() { return { data: {}, }; }, async created() { await this.getCustomData(); }, async mounted() { }, methods: { getCustomData() { axios .get("/data.json") .then( (res) => (console.log(res), (this.$store.state.customJson = res.data)) ) .catch((error) => console.log(error)); }, }, }; </script>

Los parámetros del ejemplo de código anterior funcionan bien, cuando hago clic en el elemento, se me redirige a la URL correcta con id.

project.vue esta página está vacía por ahora, solo estoy probando si puedo acceder a los datos de vuex y no puedo. Parece variable en vuex está vacío

 <template> <div> </div> </template> <script> import axios from "@axios"; export default { components: {}, data() { return { data: {}, }; }, created() { }, mounted() { console.log("data", this.$store.state.customJson) }, methods: { }, }; </script>

esta es mi index.js es la carpeta de la tienda

 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state:{ customJson:[] }, strict: process.env.DEV, })