How to update a user state from a login component in vue js?

user_10149636 0
Viewed 3569

I´m trying to update the user vuex state from a Login component have here. I have very few experience with vuex so I´m little lost in the process... this is how I´m trying:

By the way, I´m trying to use (https://github.com/devjin0617/vue2-admin-lte) , however I just added a Login component to the project

user.js

`const mutations = {
    set: (state, user) =>{

    state.main =   Object.assign({}, state.main, user)
}

actions.js

export const updateCurrentUser = ( {commit}, form ) => {

commit('setUser',form)

}

mutation-types

 export const UPDATE_USER = 'UPDATE_USER'

Finally in the Login.vue component I have the login() method in which I´m trying to call the action

Login.vue

methods:{

    ...mapActions([
      'updateCurrentUser'
    ]),
logIn() {
    this.$store.commit() // I dont know which parameters to call here

    this.currentUser.mutations.set(this.form) // I´ve tried this, but doesn´t work
}

`

I´m want to update the user but at the moment I´m being able to access the setter method

I don´t know if I´m following the correct method resolution order to make this work...

I still lost in the order to call the procedures.

vuex-modules vuex vue.js
2 Answers

From the look of your given codes, your codes and files is a bit messy, I see you are trying to use vuex with modules, but the way you are doing it seems wrong, can't really tell because I can't see your folders and files structure.

Let start with a simple method of achieving this.

1. create a store folder inside your src folder

2. create a mutation type const js src/store/mutation-types.js

Inside your mutation-types.js put this code

export const UPDATE_USER = 'UPDATE_USER'

3. Inside your store folder create an index.js file

4. Inside your src/store/index.js you put the following code

index.js

// import your mutation type name constants
import * as types from './mutation-types'

export default new Vuex.Store({
      state: {
        user: {} // default empty object
      },
      getters: {
        //...other getters...
      },
      mutations: {
        // mutating your user state
        [types.UPDATE_USER](state, user) {
          state.user = user
        }
      },
      actions: {
      },
})

5. Make sure you import vuex's store inside your main.js

Inside your main.js

import store from './store'

// other codes

// export Vue
export default new Vue({
  el: '#app',
  router,
  store, // add your store
  components: {App},
  template: '<App/>'
})

6. committing inside your component

Login.vue

methods:{
   logIn() {
     // let say you have gotten your user data
     // then you can commit it into vuex storage by using the mutation constant name you defined
     let userData = {user_id: 1}
     this.$store.commit('UPDATE_USER', userData)
   }
}

That's it, keep it simple when you first started, don't try anything fancy like modules.

user_76023240

The final solution is like this:

1- vuex/modules/user.js

import firebase from 'firebase'

const state = {
  user:null
}

const getters = {

  user: state => {
    return state.user
  }
}

// mutations
const mutations = {

  'SET_USER' (state, user)  {

    state.user = user

  }
}

// actions
const actions = {

  setUser: ( {commit}, user ) => {

    if (user){

      let fireUser = null

      firebase.firestore().collection("users").doc(user.uid).get()
        .then( doc => {

          fireUser = doc.data()

          commit('SET_USER', fireUser)


        }).catch( err => {
        console.log(err)
      })
    }

    console.log(state.user)

  }

}

export default {
  state,mutations,actions,getters
}

2- vuex/store.js

import Vue from 'vue'
import Vuex from 'vuex'

import user from './modules/user'

Vue.use(Vuex)

// debugger
export const store = new Vuex.Store({
  modules:{
    user
  }
})

3- App.vue

// So here is where the event is fired when the user get´s logged in the firebase

created(){
    let _this = this
    window.firebase.auth().onAuthStateChanged( user => {
      // set user credentials
      if (user){

        if (_this.$store)
            _this.$store.dispatch('setUser', user)

      } else {

        if(_this.$store)
          _this.$store.dispatch('setUser', null)

      }
    })
  }

I don´t know if it is the best implementation, but It´s working for the moment

user_101496360
Related