Uncaught (in promise) TypeError: type.trim is not a function

Question

My login page was working fine, I did an update and this error appeared.

Uncaught (in promise) TypeError: type.trim is not a function

Login.vue

import { UserLogin } from "@/common/auth_apis";
import { notify } from "@/common/helpers";
import { CheckUserSubscription } from "@/common/subscription_apis";

export default {
    data: () => ({
        form: {}
    }),

    methods: {
        login() {
            UserLogin(this.form).then(res => {
                if(res && res.data){
                    this.$store.dispatch('setToken', res.data.access_token);
                    this.$store.dispatch('setUserName', res.data.username);
                    this.$store.dispatch('setUserType', res.data.role);
                    this.$store.dispatch('setUserAvatar', res.data.avatar);
                    localStorage.setItem("logged", true);
                    
                    let _type = res.data.role.trim();
                    if( _type == "1" || _type == "2") CheckUserSubscription();

                    this.$router.push({path: '/'});
                    notify('success', null, 'Inicia sesión correctamente');
                }else{
                    notify('error', null, 'error de inicio de sesion');
                }
            })
        },
        gotoRecuperar(){
            // if(!this.isManager) return;
            this.$router.push('/recuperar/');
        },

        gotoRegistrar(){
            // if(!this.isManager) return;
            this.$router.push('/register/');
        }
    }
};

when executing I get the following error.

Uncaught (in promise) TypeError: type.trim is not a function
    at Store.setUserType (index.js?4360:50)
    at Array.wrappedActionHandler (vuex.esm.js?2f62:847)
    at Store.dispatch (vuex.esm.js?2f62:512)
    at Store.boundDispatch [as dispatch] (vuex.esm.js?2f62:402)
    at eval (Login.vue?7463:70)

in the page index.js

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex);

export default new Vuex.Store({
    plugins: [createPersistedState({
        storage: window.sessionStorage,
    })],
    state: {
        user_id: null,
        user_name: null,
        user_type: null,
        user_avatar: null,
        access_token: null,
    },
    mutations: {
        setUserID (state, id) {
            state.user_id = id
        },
        setUserName (state, name) {
            state.user_name = name
        },
        setUserType (state, type) {
            state.user_type = type
        },
        setUserAvatar (state, avatar) {
            state.user_avatar = avatar
        },
        setToken (state, token) {
            state.access_token = token
        },
        clearUserInfo (state) {
            state.user_id = null
            state.user_name = null
            state.user_type = null
            state.user_avatar = null
            state.access_token = null
        }
    },
    actions: {
        setToken ({commit}, token) {
            commit('setToken', token);
        },
        setUserName ({commit}, name) {
            commit('setUserName', name.trim());
        },
        setUserType ({commit}, type) {
            commit('setUserType', type.trim());
        },
        setUserAvatar ({commit}, avatar) {
            commit('setUserAvatar', avatar ? avatar.trim() : null);
        },
        clear ({commit}){
            commit('clearUserInfo');
        }
    },
    getters: {
        user: state => {
            return {
                id: state.user_id,
                name: state.user_name,
                type: state.user_type,
                avatar: state.user_avatar
            }
        },
        token: state => {
            return state.access_token;
        }
    },
    modules: {}
});

the return value of the service is as follows.

access_token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC93bGluaWkuY29tXC9hcHBzZXJ2aWNlXC9hcGlcL3VzdWFyaW8iLCJpYXQiOjE2MTM0NTQ0OTAsImV4cCI6MTYxMzU0MDg5MCwibmJmIjoxNjEzNDU0NDkwLCJqdGkiOiJZdUFOQVFkdDNoTDJ0UUZOIiwic3ViIjoiMDAwMDAwMDIiLCJwcnYiOiI1ODcwODYzZDRhNjJkNzkxNDQzZmFmOTM2ZmMzNjgwMzFkMTEwYzRmIn0.3uHqmQSCfQjdq1v74xbi39ime8SEs2zC2LxbF5llums"
avatar: "/images/perfil/1612847757.png"
role: 1
username: "VDIEG10"

I have seen in some posts that it could be a problem with the NPM version. Thanks in advance for the help.

Answer 1

You can only call the trim method on strings. res.data.role is a Number and so res.data.role.trim is undefined.

setUserType({ commit }, type) {
  commit('setUserType', type)
}