引用vuex的store.js 使用里面的getter提示getter未定义

1. 引用我在http.js文件引用的store.js 使用里面的getter提示getter未定义

2. http.js的代码

import axios from 'axios';

import store from '../../store/store.js'


if (process.env.NODE_ENV === 'development') {
    axios.defaults.baseURL = '127.0.0.1:8000';
} else if (process.env.NODE_ENV === 'debug') {
    axios.defaults.baseURL = '127.0.0.1:8000';
} else if (process.env.NODE_ENV === 'production') {
    axios.defaults.baseURL = '127.0.0.1:8000';
}
axios.defaults.timeout = 10000;

const token = store.getters('user/getUserToken');

console.log(token);

// console.log('store', store);
// console.log('token', store.getters('user/getUserToken'));
axios.interceptors.request.use(
    config => {

        // const token = store.state('user/token');
        console.log('token', store);
        // token && (config.headers.Authorization = token);
        return config;
    },
    error => {
        return Promise.error(error);
    });

axios.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    // 服务器状态码不是200的情况
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                // 401: 未登录
                // 未登录则跳转登录页面,并携带当前页面的路径
                // 在登录成功后返回当前页面,这一步需要在登录页操作。
                case 401:
                    this.$router.replace({
                        path: '/login',
                        query: {redirect: router.currentRoute.fullPath}
                    });
                    break;
                // 403 token过期
                // 登录过期对用户进行提示
                // 清除本地token和清空vuex中token对象
                // 跳转登录页面
                case 403:
                    HeyUI.$Message.error('登录过期,请重新登录');
                    // 清除token
                    localStorage.removeItem('token');
                    store.commit('user/loginSuccess', null);
                    // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面
                    setTimeout(() => {
                        this.$router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    }, 1000);
                    break;
                // 404请求不存在
                case 404:
                    HeyUI.$Message('网络请求不存在');
                    break;
                // 其他错误,直接抛出错误提示
                default:
                    HeyUI.$Message(error.response.data.message);
            }
            return Promise.reject(error.response);
        }
    }
);


export default axios;

3. store.js中的代码

import Vue from 'vue'
import Vuex from 'vuex'
import user from '../store/common/userInfo'
import permission from '../store/common/permission'

Vue.use(Vuex);
export default new Vuex.Store({
    modules: {
        user,
        permission
    }
});

4. userinfo.js中的内容

import Vue from 'vue'

export default {
    namespaced: true,
    state: {
        user_info: null,
        // token: null
    },
    mutations: {
        updateUserInfo: ({state, payload}) => {
            window.localStorage.setItem('isLogin', true);
            state.user_info = payload;
        },
        loginSuccess: ({state, payload}) => {
            state.token = payload;
            // window.localStorage.setItem("token", payload)
            window.localStorage.setItem('isLogin', true);
        }

    },
    actions: {
        getUserInfo: async ({commit}) => {
            let userInfo = await Vue.prototype.$http.post(`/api/getUserInfo`, {}).then(res => {
                if (res.data.code === 4001) {
                    HeyUI.$Message.error(res.data.msg)
                }
                return res.data.data;
            }).catch(err => {
                if (err.response) {
                    HeyUI.$Message.error(err.response.statusText);
                    return;
                }
                HeyUI.$Message.error(err.message)
            });

            if (userInfo) {
                commit('updateUserInfo', userInfo)
            }

        }
    },
    getters: {
        getUserToken: (state) => {
            if (state.user_info) {
                return state.user_info.token
            }
            return {}
        }
    }
};

4. google浏览器插件vue 看到的vuex中的数据

图片描述

5. 结果

图片描述

为什么会这样呢

阅读 1.7k
评论
    4 个回答

    modules里写的getter要用store.getter['模块名/方法名']调用
    或者引入mapGetter同样需要模块名/方法名
    另外vuex提供了createNamespacedHelper可以直接创建一个模块内的引用方法

    import{createNamespacedHelpers} from vuex;
    const {mapGetter} from createNamespacedHelpers('user')

    这样的mapGetter引入不需要写模块名

      相似问题
      推荐文章