VueJS Axios: Getting JSON data

Question

I'm trying to get this informations and put it in "user" : jsondata

the action in VueJS:

export default new Vuex.Store({
state: {
    status: '',
    token: localStorage.getItem('token') || '',
    user : {},
    test : []
},
mutations: {
    auth_request(state){
        state.status = 'loading'
    },
    auth_success(state, token, user){
        state.status = 'success'
        state.token = token
        state.user = user
    },
    auth_error(state){
        state.status = 'error'
    },
    logout(state){
        state.status = ''
        state.token = ''
    },
},
actions: {
    login({commit}, user){
        return new Promise((resolve, reject) => {
            commit('auth_request')
            axios.get('http://localhost:8080/offreeduwar/api/Useraccount/login/'+ user.email+'/'+user.password)
            .then((resp) => {
                const token = resp.data.token
                const user = resp.data
                console.log(test)
                localStorage.setItem('token', token)
                // Add the following line:
                axios.defaults.headers.common['Authorization'] = token
                commit('auth_success', token, user)
                resolve(resp)
            })
            .catch(err => {
                commit('auth_error')
                localStorage.removeItem('token')
                reject(err)
            })
        })
    },

But all the time in Vue devtool : the state of user is empty , so the question how to put this informations in user to work with this variable

Máté Wiszt · Accepted Answer · 2018-08-29 10:33:56Z

1

The commit method in the store has two parameters: the name of the mutation and the params (if it is of a primitive type, the value itself, if it is an object, then an object). So you should try it like this:

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

and then:

auth_success(state, payload){
        state.status = 'success'
        state.token = payload.token
        state.user = payload.user
    },

answered Aug 29, 2018 at 10:33

Máté Wiszt

4203 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Anas Valencia Over a year ago

Thanks but i hope another problem now , in the action of login : login: function () { let email = this.email let password = this.password this.$store.dispatch('login', { email, password }) .then(() => this.$router.push('/')) .catch(err => console.log(err)) } when the router push to / : the condition of </router-link><span v-if="isLoggedIn"> | <a @click="logout">Logout</a></span> doesn't work i have to refresh the page to see "Logout" and when i refresh the page the state of user becomes empty

Máté Wiszt Over a year ago

When using Vue.js, you should never refresh the page because the stored data will be lost, you can navigate only by the router. If I understand correctly, you try to reload the same page with navigation to '/' but in this case you don't have to. You just have to set the isLoggedIn to true. If you still want to navigate, you can send params via the router: router.vuejs.org/guide/essentials/…

Anas Valencia Over a year ago

i add sessionStorage.setItem('user',JSON.stringify(user)) to save the currect session but when the page go to ->'/' this.$router.push('/')) the condition v-if doesn't show the user.email or the word Logout but when i refresh it work fine :

Collectives™ on Stack Overflow

VueJS Axios: Getting JSON data

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related