vuex组合Action无法获取到外部定义的常量

发布于 2022-09-06 00:02:42 字数 3726 浏览 16 评论 0

问题描述,当我在组件中使用this.$store.dispatch('doLogin', params);调用vuex的Action时,提示 'client_id' of undefined。当我去掉组合Actions时又恢复正常,有没有高手知道是什么原因?

关于组合Action的文档链接点击

错误信息如下

app.js?id=8671198961ffe2196f6c:1423 Uncaught TypeError: Cannot set property 'client_id' of undefined
    at Object.Login (app.js?id=8671198961ffe2196f6c:1423)
    at Store.getAccessToken (app.js?id=8671198961ffe2196f6c:1702)
    at Array.wrappedActionHandler (vendor.js?id=a8a06ec14a7f1c1bde21:71376)
    at Store.dispatch (vendor.js?id=a8a06ec14a7f1c1bde21:71108)
    at Store.boundDispatch [as dispatch] (vendor.js?id=a8a06ec14a7f1c1bde21:71020)
    at Store.doLogin (app.js?id=8671198961ffe2196f6c:1725)
    at Array.wrappedActionHandler (vendor.js?id=a8a06ec14a7f1c1bde21:71376)
    at Store.dispatch (vendor.js?id=a8a06ec14a7f1c1bde21:71108)
    at Store.boundDispatch [as dispatch] (vendor.js?id=a8a06ec14a7f1c1bde21:71020)
    at VueComponent.login (app.js?id=8671198961ffe2196f6c:138)

相关代码文件
configs/api.config.js

const prefix = '/api';

const api = {
    oauth: {
        token: "/oauth/token",
    },
    user:{
        show: prefix + '/user'
    }
};

const oauth_client = {
    id: "2",
    secret: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
};

export default {
    api: api,
    client: oauth_client
}

api/login.js

import axios from './axios.js';
import conf from '../configs/api.config.js';

export default {
    Login(params) {
        params['client_id'] = conf.client.id;
        params['client_secret'] = conf.client.secret;
        params['grant_type'] = 'password';
        params['scope'] = '';
        return axios.post(conf.api.oauth.token, params);
    },
    GetUser(params) {
        return axios.get(conf.api.user.show, params);
    }
};

store/modules/login.js

import login from '../../api/login.js'
import * as types from '../mutation-types';
import store from "../index";
//略去···
// actions
const actions = {
    getAccessToken({commit, state}, params) {
        //登陆
        commit(types.LOGIN);
        login.Login(params).then(response => {
            //登陆成功
            console.log(response);
            commit(types.LOGIN_SUCCESS, {
                access_token: response.data.access_token,
                refresh_token: response.data.refresh_token
            });

        }, error => {
            //登陆失败
            console.log(error);
            commit(types.LOGIN_FAILURE)
        });
        state.dispatch()
    },
    doLogout({commit}) {
        commit(types.LOGOUT);
        commit(types.LOGOUT_SUCCESS);
    },
    doLogin({commit}, params) {
        store.dispatch('getAccessToken').then(() => {
            //获取用户信息
            commit(types.GET_USER);
            login.GetUser(params).then(response => {
                //获取用户信息成功
                commit(types.GET_USER_SUCCESS, {user: response.data});
            }, error => {
                //获取用户信息失败
                commit(types.GET_USER_FAILURE);
            });
        })
    }
};
//略去···
example
|   app.js
|   bootstrap.js
|   routes.js
|   
+---api
|       api.js
|       axios.js
|       login.js
|       
+---components
|       App.vue
|       
+---configs
|       api.config.js
|       
+---store
|   |   actions.js
|   |   getters.js
|   |   index.js
|   |   mutation-types.js
|   |   
|   \---modules
|           login.js
|           
\---views
    +---dashboard
    |       dashboard.vue
    |       
    \---login
            login.vue

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

难得心□动 2022-09-13 00:02:42

你的api.config.js中是什么?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文