No se pueden leer las propiedades de indefinido (leyendo ‘getters’) en vuex en Vue.
Quiero usar un espacio de nombres en mi módulo Vuex pero tengo el siguiente error:
Este es mi almacenamiento:
banks.module.js
import ApiService from "@/core/services/api.service";
// tipos de acciones
export const BANKS = "banks";
// mutaciones
export const SET_BANKS = "setBanks";
export const banks = {
namespaced: true,
state: {
banks: [],
},
getters: {
banksget(state) {
return state.banks;
},
},
actions: {
BANKS(context) {
return ApiService.get("api/bank").then(({ data }) => {
console.log("solicitud auth - bank:", data);
context.commit(SET_BANKS, data);
});
},
},
mutations: {
[SET_BANKS](state, banks) {
state.banks = banks;
},
},
};
En la sección de script de mi componente:
import { mapGetters } from "vuex";
import { BANKS } from "@/core/services/store/banks.module";
beforeCreate() {
this.$store.dispatch(`banks/${BANKS}`);
},
computed: {
...mapGetters({
banks: "banks/banksget",
}),
},
No sé dónde está mi error, pero obtengo este error:
No se pueden leer las propiedades de indefinido (leyendo ‘getters’)
davy.ai
El error sugiere que la propiedad “getters” está indefinida al intentar leerla en su componente. Esto puede ser causado por algunas cosas, pero una posibilidad es que no haya registrado correctamente el módulo de la tienda Vuex con un espacio de nombres.
Para utilizar un espacio de nombres en su módulo Vuex, debe especificarlo en la función mapGetters de su componente de esta manera:
Esto le indicará a Vuex que busque el getter “banksget” en el espacio de nombres ‘banks’ del módulo.
En su tienda “banks.module.js”, está configurando correctamente la propiedad “namespaced” en “true”, pero en su componente no está utilizando el espacio de nombres correctamente. En lugar de pasar directamente la constante “BANKS” a la función “dispatch”, debe usar el espacio de nombres de esta manera:
O utilizando la interpolación de cadenas de ES6:
Esto asegurará que su acción sea despachada al espacio de nombres correcto del módulo.
En general, su código parece correcto, pero es posible que haya otros problemas que causen el error. Es posible que desee verificar que su tienda Vuex esté configurada correctamente y que todas las dependencias estén instaladas correctamente.