TypeError:无法读取未定义商店调度 vuex 的属性“令牌”

Posted

技术标签:

【中文标题】TypeError:无法读取未定义商店调度 vuex 的属性“令牌”【英文标题】:TypeError: Cannot read property 'token' of undefined store dispatch vuex 【发布时间】:2021-07-12 11:19:11 【问题描述】:

我有一个使用商店 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');

在商店/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后:

EDIT2

新方法:

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

行:

不过,响应会被记录下来。

【问题讨论】:

【参考方案1】:

两个问题:

第一个问题

这段代码:

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'
        )
      );
    

【讨论】:

【参考方案2】:

这意味着responsedata 属性未定义。

AuthenticationService.register 方法是异步的吗?

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

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

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

【讨论】:

好吧,就像我在回答中所说的那样,您需要等待承诺 :) 您可以使用 async/await 语法。 developer.mozilla.org/en-US/docs/Learn/javascript/Asynchronous/…

以上是关于TypeError:无法读取未定义商店调度 vuex 的属性“令牌”的主要内容,如果未能解决你的问题,请参考以下文章

Vue:未捕获(承诺中)TypeError:无法读取未定义的属性'_c'

[Vue 警告]:渲染错误:“TypeError:无法读取未定义的属性 'NomeStr'”

TypeError:无法读取 Vue 中未定义的属性“id”

Vue 3 + Vue Router 4:TypeError:无法读取未定义的属性(读取“推送”)

Vue警告:创建的钩子出错:“TypeError:无法读取未定义的属性'get'”

Vue警告]:渲染错误:“TypeError:无法读取未定义的属性'map'”Vue Google地图[重复]