How can i send object data from vue component to vuex store?

Question

Note: This is a fake project with fake datas. Unimportant setting up the token with Date.now()

My Question: I want to send userData object to vuex store.

I want to send the userData object to the Vuex repository. But its return [object object].

I delete the userData object and I write let user = this.username variable instead of userData. It works.

But it doesn't work with the;

let userData = {
    name: this.username,
    surname: this.surname,
}

its my login method (login.vue):

    methods: {
        ...mapActions(['login']),
        loginUser() {

            let userData = {
                name: this.username,
                surname: this.surname,
            }
            this.login(userData)
        }
    }

and its vuex (auth.js) file

   const state = {
       token: localStorage.getItem('token') || '',
       user: {},
       status: ''
   };

   const getters = {
       isLoggedIn: state => !!state.token,
       user: state => state.user
   };

   const actions = {
       async login({commit}, user) {
           commit('login_request');
           let token = Date.now() + '' + user
           localStorage.setItem('token', token);
           localStorage.setItem('user', user);
           commit('login_success', token, user)
           router.push('/')
       },

       async getProfile({commit}) {
           commit('profile_request');
           let profile = await localStorage.getItem('user')
           commit('user_profile', profile);
       },
   }

   const mutations = {
       login_request(state) {
           state.status = 'Loading login action.'
       },
       login_success(state, token, user) {
           state.status = 'Login success.';
           state.token = token;
           state.user = user
       },
       profile_request(state) {
           state.status = 'Loading user profile.'
       },
       user_profile(state, user) {
           state.status = 'Success getProfile action.'
           state.user = user
       }

Result in vue devtools:

auth:Object
    status:"Success getProfile action."
    token:"1589861864025[object Object]"
    user:Object

Problem solved. The final version;

const actions = {
    async login({commit}, user) {
        commit('login_request');
        let token = Date.now() + '' + user.name;
        localStorage.setItem('token', token);
        localStorage.setItem('user', user.name)
        commit('login_success', {token, user})
        router.push('/')
    },
    async getProfile({commit}, {user}) {
        commit('profile_request');
        let profile = user
        commit('user_profile', profile);
    },
};

const mutations = {
    login_request(state) {
        state.status = 'Loading login action.'
    },
    login_success(state, payload) {
        state.status = 'Login success.';
        state.token = payload.token;
        state.user = payload.user
    },
    profile_request(state) {
        state.status = 'Loading user profile.'
    },
    user_profile(state, user) {
        state.status = 'Success getProfile action.'
        state.user = user
    }
};

Mandeep Gill · Accepted Answer · 2020-05-19T05:52:44.673

0

string concatenation with object not working and it always show [object object] until you stringify Json Object like this :

let token = Date.now() + '' + JSON.stringify(user)

Your mutations and commit should be like this :

Actions :

commit('login_success', {token, user})

Mutations :

login_success(state, payload) {
 state.status = 'Login success.';
 state.token = payload.token;
 state.user = payload.user
},

edited May 19 '20 at 05:52

answered May 19 '20 at 05:21

Mandeep Gill

4,577
1
28
34

It works but `state.user` still return [object object] – Emre Arabaci May 19 '20 at 05:34
Make sure when you use state.user it should be an object not string concatenation, do you use console.log("") ? – Mandeep Gill May 19 '20 at 05:45
I am not sure if we can pass multiple arguments to mutation, so i am going to update my answer to mutation like i use according to documents. – Mandeep Gill May 19 '20 at 05:50
1

You gave me perspective with your answer. I solved the problem. Thank you. I am going to update my post the solution is for everyone to see. – Emre Arabaci May 19 '20 at 06:06
1

My reputation points is below 15 points. So I just able to mark your answer as solved only. Thanks again :) – Emre Arabaci May 19 '20 at 06:33

How can i send object data from vue component to vuex store?

1 Answers1