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

Question

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.

Answer 1

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