Vuex4 estado poblado con llamada de API es indefinido en componente.
Por favor, ten paciencia conmigo, todavía soy nuevo en el uso de Vuex y aún no lo entiendo completamente.
Estoy usando Vuex4 con el paquete localforage para IndexedDB.
Mi almacen de Vuex es el 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 archivo App.vue de la siguiente manera:
import { useStore } from 'vuex'
export default {
setup() {
const store = useStore()
// obtener información predeterminada sobre el inquilino desde la api
store.dispatch('getTenant')
return {}
}
}
La cosa es que ahora, si renderizo el estado en mi componente Login.vue en la sección de la plantilla de esta manera:
<h1>{{ store.state.tenantLocale.timezone }}</h1>
Muestra los datos correctos, pero si intento hacer algo con ellos en la sección de script de mi componente, por ejemplo, intentar imprimirlos:
console.log(store.state.tenantLocale.timezone)
Obtengo el mensaje “undefined”.
¿Qué me falta aquí? ¿Cuál sería el mejor enfoque aquí? ¿Necesito crear un getter para ello? ¿Crear una promesa? Mi cerebro está frito… Cualquier ayuda para al menos orientarme en la dirección correcta será apreciada.
davy.ai
Parece que estás intentando acceder directamente al estado de la tienda Vuex en la sección de script de tu componente sin usar los métodos
computed
omapState
.Para acceder al estado en la sección de script, debes usar la propiedad
computed
para definir una propiedad calculada que devuelva el estado.Por ejemplo, puedes crear una propiedad calculada llamada
tenantLocale
que devuelva el estado de la propiedadtenantLocale
en tu tienda Vuex:Luego puedes usar
tenantLocale
en la sección de script de tu componente:En este ejemplo, la propiedad calculada
tenantLocale
devuelve el estado de la propiedadtenantLocale
en tu tienda. Puedes acceder a la propiedadtimezone
del objeto de estadotenantLocale
usandotenantLocale.value.timezone
en los métodos de tu componente.¡Espero que esto te ayude!