0

Estoy utilizando Quasar para crear una plataforma para la empresa en la que trabajo.

Hasta el momento, he podido con todo, pero aún se me dificulta entender cómo se maneja el Vuex con este framework.

Forma en la que organizo el store.

Así organizo el store. Y a continuación, mostraré el store que quiero utilizar para hacer la autenticación (que se llama authentication-state.js)

const state = {
    token: ''
}

const mutations = {
    setToken(state, token){
        state.token = token
    },
}

const actions = {
    getToken({ commit }) {
        this.$axios.get('ruta').then(response => {
            commit('setToken', response.data)
        }).catch(error => console.log('Error: ' + error));
    },
}

const getters = {
    getToken(state) {
        return state.token
    }
}

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

Y así es cómo quiero utilizarlo en mi componente:

<script>
import { mapGetters, useStore, mapActions } from 'vuex'
import { useQuasar } from 'quasar'
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Login',
  components: {},
  data: () => ({}),
  mounted() {
    const $q = useQuasar()
    const $store = useStore();
    this.getToken();
  },
  computed: {},
  methods: {
    ...mapActions("authentication", ["getToken"]),
    onSubmit (event) {
      event.preventDefault();

      if (this.user === null && this.password === null) {
        this.$q.notify({
          color: 'red-5',
          textColor: 'white',
          icon: 'warning',
          message: 'You need to password the license and terms first'
        })
      }
      else {
        this.setSession();
      }
    },

    onReset () {
      this.user = null
      this.password = null
    },
  }
})

Pero por alguna razón, ese código no me funciona bien y me arroja el siguiente error:

Error del vuex

¿Cómo hago para que me funcione?

He probado varias cosas para que me funcione y ninguna me funciona. Salen distintos errores.

1 respuesta 1

0

Creo que estás utilizando vuex de la forma incorrecta. Te recomiendo que lo agregues como un módulo store utilizando:

quasar new store authentication

El error que te arroja el navegador at Store.getToken (authentication-state.js?430a:13.1) indica un detalle en la línea 13 de tu archivo authentication-state.js; parece ser que no encuentra la instancia de axios, por tanto el método get no esta definido. Si realizas la separación correspondiente, lo puedes importar de la siguiente manera:

import axios from "axios"
export function getToken({ commit }) {
    axios.get('ruta').then(response => {
        commit('setToken', response.data)
    }).catch(error => console.log('Error: ' + error));
}

Si esto no lo soluciona, comparte el detalle que te muestra al dar clic sobre el mensaje

Store.getToken (authentication-state.js?430a:13.1)

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.