0

Estoy teniendo problemas con con los getters en VueJS. Tengo que cambiar mi barra de navegación dependiendo si el usuario está o no autenticado. Pero me muestra el siguiente error:

[vuex] unknown getter: user/is_authenticated

  1. Store.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

// import getters from './getters'
import user from './modules/user'
import front from './modules/front'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    front,
    user
  },

2.user.js

const UserModule = {
  state: {
    is_authenticated: false,
    access_token: null,
    id_token: null,
    email: null,
    name: null,
    lastname: null,
    birth_date: null,
    genre: null,
    document_type: null,
    document_number: null,
    nationality: null,
    country_residence: null,
    phone: null
  },
  getters: {
    is_authenticated: state => state.is_authenticated,
  },
...
export default {
  UserModule,
  namespaced: true
}

3 NavBar.vue

computed: {
    ...mapGetters(['windowsWidth', 'sizes']),
    ...mapGetters('user', ['is_authenticated'])
  },
  mounted () {
    this.menu = routesMenu('portal')
    console.log(this.is_authenticated)
  },

El console.log me da undefined , y al hacerlo sin el nombre del modulo ...mapGetters(['is_authenticated']) , me devuelve false sin importar que valor le de. Llevo poco tiempo usando Vue, ya he buscado de todo

2
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! Y como esta definido el store?
    – gbianchi
    el 3 feb. 2021 a las 16:35
  • Ah perdon ahi esta... me confundio el nombre...
    – gbianchi
    el 3 feb. 2021 a las 16:47

1 respuesta 1

0

Desde user.js estas exportando una constante que tiene el estado, getters, acciones y mutacacion, pero cuando llamas a ese modulo no tienes la estructura correcta.

una opcion es crear cada variable como una constante y exportarlas de forma individual, que es lo mas comun:

const state = {
    is_authenticated: false,
    access_token: null,
    id_token: null,
    email: null,
    name: null,
    lastname: null,
    birth_date: null,
    genre: null,
    document_type: null,
    document_number: null,
    nationality: null,
    country_residence: null,
    phone: null
  },
  getters = {
   is_authenticated: state => state.is_authenticated,
  },
...

export default {
  state, getters, actions, mutations
  namespaced: true
}

de esta manera accedes a los datos que necesites del modulo.

la otra opcion, que no probe, pero imagino que podria funcionar es editar el mapGetter a algo como:

...mapGetters('user', ['UserModule.is_authenticated'])

insisto en que no lo probe, y es probable que no funcione.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.