Skip to main content
se eliminaron 356 caracteres en el cuerpo
Origen Enlace
Israel-ICM
  • 3.6k
  • 25
  • 20
  • 26

Tengo el error Error in v-on handler (Promise/async): "TypeError: Cannot read properties of undefined (reading 'dispatch')" cuando intento hacer el login comunicandome a una accion en vuex por medio de dispatch.

Error in v-on handler (Promise/async): "TypeError: Cannot read properties of undefined (reading 'dispatch')" cuando intento hacer el login comunicandome a una accion en vuex por medio de dispatch.

AsiAsí tengo el archivo principal de Vue (main.js):

main.jsmain.js

import Vue from 'vue';
import DashboardPlugin from './plugins/dashboard-plugin';
import App from './App.vue';

// router setup
import router from './routes/router';
import store from './store';
// plugin setup
Vue.use(DashboardPlugin);

/* eslint-disable no-new */
new Vue({
  store,
  router,
  el: '#app',
  render: h => h(App),
});

import Vue from 'vue';
import DashboardPlugin from './plugins/dashboard-plugin';
import App from './App.vue';

// router setup
import router from './routes/router';
import store from './store';
// plugin setup
Vue.use(DashboardPlugin);

/* eslint-disable no-new */
new Vue({
  store,
  router,
  el: '#app',
  render: h => h(App),
});

elEl archivo que llama store es el siguiente index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios' 
axios.defaults.withCredentials = true;

Vue.use(Vuex);
 
const store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {
        async login(raw){
            await axios.get('http://localhost:8000/sanctum/csrf-cookie')
            await axios.post('http://localhost:8000/login',raw)
        }, 
      
    },
    modules: {}

})

export default store
y el metodo de vue donde llamo a la accion login es este

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios' 
axios.defaults.withCredentials = true;

Vue.use(Vuex);
 
const store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {
        async login(raw){
            await axios.get('http://localhost:8000/sanctum/csrf-cookie')
            await axios.post('http://localhost:8000/login',raw)
        }, 
      
    },
    modules: {}

})

export default store

Y el método de vue donde llamo a la acción login.vue

  methods: {
  
  onSubmit() {


    this.$store.dispatch('login');

    }
 }
es este:

 

login.vue

  methods: {
  onSubmit() {
    this.$store.dispatch('login');

    }
 }

Si desde el main.js yo llamo al dispatch store.dispatch('login') si me esta funcionando `store.dispatch('login') si me esta funcionando pero desde el login me devuelve el error de la pregunta.

Tengo el error Error in v-on handler (Promise/async): "TypeError: Cannot read properties of undefined (reading 'dispatch')" cuando intento hacer el login comunicandome a una accion en vuex por medio de dispatch.

Asi tengo el archivo principal de Vue (main.js)

main.js

import Vue from 'vue';
import DashboardPlugin from './plugins/dashboard-plugin';
import App from './App.vue';

// router setup
import router from './routes/router';
import store from './store';
// plugin setup
Vue.use(DashboardPlugin);

/* eslint-disable no-new */
new Vue({
  store,
  router,
  el: '#app',
  render: h => h(App),
});

el archivo que llama store es el siguiente index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios' 
axios.defaults.withCredentials = true;

Vue.use(Vuex);
 
const store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {
        async login(raw){
            await axios.get('http://localhost:8000/sanctum/csrf-cookie')
            await axios.post('http://localhost:8000/login',raw)
        }, 
      
    },
    modules: {}

})

export default store
y el metodo de vue donde llamo a la accion login es este

login.vue

  methods: {
  
  onSubmit() {


    this.$store.dispatch('login');

    }
 }

 

Si desde el main.js yo llamo al dispatch store.dispatch('login') si me esta funcionando pero desde el login me devuelve el error de la pregunta.

Tengo el error:

Error in v-on handler (Promise/async): "TypeError: Cannot read properties of undefined (reading 'dispatch')" cuando intento hacer el login comunicandome a una accion en vuex por medio de dispatch.

Así tengo el archivo principal de Vue (main.js):

main.js

import Vue from 'vue';
import DashboardPlugin from './plugins/dashboard-plugin';
import App from './App.vue';

// router setup
import router from './routes/router';
import store from './store';
// plugin setup
Vue.use(DashboardPlugin);

/* eslint-disable no-new */
new Vue({
  store,
  router,
  el: '#app',
  render: h => h(App),
});

El archivo que llama store es el siguiente: index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios' 
axios.defaults.withCredentials = true;

Vue.use(Vuex);
 
const store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {
        async login(raw){
            await axios.get('http://localhost:8000/sanctum/csrf-cookie')
            await axios.post('http://localhost:8000/login',raw)
        }, 
      
    },
    modules: {}

})

export default store

Y el método de vue donde llamo a la acción login es este:

login.vue

  methods: {
  onSubmit() {
    this.$store.dispatch('login');

    }
 }

Si desde el main.js yo llamo al dispatch `store.dispatch('login') si me esta funcionando pero desde el login me devuelve el error de la pregunta.

Origen Enlace

Error in v-on handler (Promise/async): "TypeError: Cannot read properties of undefined (reading 'dispatch')"

Tengo el error Error in v-on handler (Promise/async): "TypeError: Cannot read properties of undefined (reading 'dispatch')" cuando intento hacer el login comunicandome a una accion en vuex por medio de dispatch.

Asi tengo el archivo principal de Vue (main.js)

main.js

import Vue from 'vue';
import DashboardPlugin from './plugins/dashboard-plugin';
import App from './App.vue';

// router setup
import router from './routes/router';
import store from './store';
// plugin setup
Vue.use(DashboardPlugin);

/* eslint-disable no-new */
new Vue({
  store,
  router,
  el: '#app',
  render: h => h(App),
});

el archivo que llama store es el siguiente index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios' 
axios.defaults.withCredentials = true;

Vue.use(Vuex);
 
const store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {
        async login(raw){
            await axios.get('http://localhost:8000/sanctum/csrf-cookie')
            await axios.post('http://localhost:8000/login',raw)
        }, 
      
    },
    modules: {}

})

export default store
y el metodo de vue donde llamo a la accion login es este

login.vue

  methods: {
  
  onSubmit() {


    this.$store.dispatch('login');

    }
 }

Si desde el main.js yo llamo al dispatch store.dispatch('login') si me esta funcionando pero desde el login me devuelve el error de la pregunta.