Por favor, sé sincero conmigo, todavía soy nuevo en el uso de Vuex y aún no lo entiendo del todo. Estoy usando Vuex4 con el paquete localforage para IndexedDB.

Mi tienda Vuex es la siguiente:

 import { createStore } from 'vuex' import localforage from 'localforage' import axios from 'axios' const store = createStore({ state: { tenantLocale: {} }, getters: {}, mutations: { setLocale(state, value) { state.tenantLocale = value } }, actions: { getTenant(context) { axios.get('/api/tenant-data/locale').then((response) => { context.commit('setLocale', response.data) localforage.setItem('tenantLocale', response.data) }) } } }) export default store

Despacho la acción en mi App.vue así:

 import { useStore } from 'vuex' export default { setup() { const store = useStore() //get default information about tenant from api store.dispatch('getTenant') return {} } }

La cosa es ahora si represento el estado en mi componente Login.vue en la sección de plantilla de esta manera:

 <h1>{{ store.state.tenantLocale.timezone }}</h1>

Muestra los datos correctos, pero si trato de hacer algo con ellos en la sección de secuencias de comandos de mi componente, digamos, por ejemplo, que intente imprimirlos:

 console.log(store.state.tenantLocale.timezone)

Recibo el mensaje indefinido.

¿Que me estoy perdiendo aqui? ¿Cuál sería el mejor enfoque aquí? ¿Necesito crear getter para ello? ¿Crear una promesa? Mi cerebro está frito... ¡Cualquier ayuda para al menos señalarme en la dirección correcta es apreciada!