开发者问题收集

TypeError:无法读取未定义 store dispatch vuex 的属性“token”

2021-04-17
261

我有一个使用 store Vuex 的 vue 组件。但是我得到了一个

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: ''
    }
})

在 GenericForm.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'
        })
      });
    }

我在

406540​​024

行上收到错误:

在此处输入图片描述

但是,响应还是被记录下来了。

2个回答

存在 两个 问题:

第一个问题

此代码:

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

返回一个 Promise ,它没有 data 属性。您想要的是访问包装在该承诺中的 axios response ,因此您可以:

  • 在承诺上调用 then
AuthenticationService.register({...}).then((response) => {
    console.log(response.data.token) // 'foo'
});
  • 在 Vue 组件内使用 async/await

第二个问题

导致存储未定义的问题是使用箭头函数。 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'
        })
      });
    }
blackgreen
2021-04-17

这意味着 responsedata 属性未定义。

AuthenticationService.register 方法是否异步?

我认为是的。如果是,则在 response 对象正确解析之前,您的代码将继续运行。

花点时间运行 console.log(response) 。如果该方法是异步的,您可能会看到未解析的承诺。

否则,如果该方法不返回任何内容而是使用回调,您可能根本看不到任何定义。

Jordan
2021-04-17