Блог

У меня есть компонент vue, который использует Vuex магазина. Однако я получаю

 TypeError: Cannot read property 'token' of undefined
 

ошибка. Я не понимаю, почему. Это мой код:

В main.js:

 import Vue from 'vue'
import Vuex from 'vuex';
import App from './App.vue'
import router from './router';
 import "./assets/css/tailwind.css";
import '@/assets/css/tailwind.css';
import store from './store';

Vue.config.productionTip = false;

 Vue.use(Vuex);

 
new Vue({
    router, store,
    render: h => h(App),
}).$mount('#app');
 

В store/indes.js:

 import Vue from 'vue';
import Vuex from 'vuex';

 
Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
    },
    state:  {
        token: ''
    }
})
 

В общей форме.vue:

   methods:  {
    execute()  {
      console.log("GenericForm.vue")

      if (this.inputFunction)  {
        this.inputFunction()
      }

      this.register()
    },

      register () {
      console.log("register()")
      try {
        const response =   AuthenticationService.register({
          email: 'testss',
          password: 'frgr'
        })
           this.$store.dispatch('setToken', response.data.token)
           this.$store.dispatch('setUser', response.data.user)
           this.$store.router.push({
          name: 'songs'
        })
      } catch (error) {
        console.log(error)
/*
        this.error = error.response.data.error
*/
      }
    }
  }
 

ошибка возникает в этой строке кода:

  this.$store.dispatch
 

Любая помощь будет признательна.

Редактировать:

AuthenticationService.js

 import api from './api'

export default  {
    register (credentials)  {
        return api().post('register', credentials)
    }
}
 

api.js

 import axios from 'axios'

export default()  =>  {
    return axios.create({
        baseURL: 'http://localhost:8081'
    })
};
 

После добавления console.log :

ПРАВКА2:

Новый метод:

     register: async () => {

     
      console.log("register()")
      const response = AuthenticationService.register({
        email: 'testss',
        password: 'frgr'
      }).then((response) => {

        console.log(response)
       /* this.$store.dispatch('setToken', response.data.token)
        this.$store.dispatch('setUser', response.data.user)*/
        this.$store.router.push({
          name: '/test'
        })
      });
    }
 

Я получаю ошибку на

  this.$store.router.push({
          name: '/test'
        })
 

линия:

Однако ответ регистрируется нормально.

Есть две проблемы:

Первая проблема:

Этот код:

 register(credentials)  {
    return api().post('register', credentials)
}
 

возвращается a Promise , у которого нет data собственности. Что вы хотите, так это получить доступ к аксиосам response , завернутым в это обещание, так что вы либо:

• призывайте then к обещанию

 AuthenticationService.register({...}).then((response) => {
    console.log(response.data.token) // 'foo'
});
 

• использование async/await внутри компонента Vue

Вторая проблема

Проблема, из-за которой хранилище не определено, заключается в использовании функций со стрелками. У register() метода не должно быть стрелки. Как только стрелка будет удалена, ошибки не будет (определено хранилище, а также маршрутизатор).:

     async register() {
      console.log("register()")
      const response = AuthenticationService.register({
        email: 'testss',
        password: 'frgr'
      }).then((response) => {

        console.log(response)
        console.log(this.$store)
        this.$router.push({
          name: 'ha'
        })
      });
    }
 

Это означает, что data свойство response не определено.

Является AuthenticationService.register ли метод асинхронным?

Я бы предположил, что это так. Если это так, то ваш код продолжается до response того, как объект будет правильно разрешен.

Подожди секунду и беги console.log(response) . Вы можете увидеть невыполненное обещание, если метод является асинхронным.

В противном случае вы можете вообще ничего не увидеть, если метод ничего не возвращает, а вместо этого использует обратные вызовы.