Store (Vuex)

Código

./src/store.js

import Vue from 'vue'
import Vuex from 'vuex'
import firebase from 'firebase'
import router from '@/router'

Vue.use(Vuex)
// const store =
export default new Vuex.Store({
  state: {
    appTitle: 'My Awesome App',
    user: null,
    error: null,
    loading: false
  },

  mutations: {
    setUser (state, payload) {
      state.user = payload
    },
    setError (state, payload) {
      state.error = payload
    },
    setLoading (state, payload) {
      state.loading = payload
    }
  },

  actions: {

    userSignUp ({commit}, payload) {
      commit('setLoading', true)
      firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
        .then(firebaseUser => {
          commit('setUser', {email: firebaseUser.user.email})
          commit('setLoading', false)
          router.push('/home')
        })
        .catch(error => {
          commit('setError', error.message)
          commit('setLoading', false)
        })
    },

    userSignIn ({commit}, payload) {
      commit('setLoading', true)
      firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
        .then(firebaseUser => {
          commit('setUser', {email: firebaseUser.user.email})
          commit('setLoading', false)
          commit('setError', null)
          router.push('/home')
        })
        .catch(error => {
          commit('setError', error.message)
          commit('setLoading', false)
        })
    },

    autoSignIn ({commit}, payload) {
      commit('setUser', {email: payload.email})
    },

    userSignOut ({commit}) {
      firebase.auth().signOut()
      commit('setUser', null)
      router.push('/')
    }
  },

  getters: {
    isAuthenticated (state) {
      return state.user !== null && state.user !== undefined
    }
  }
})

Importaciones

Importamos lo siguiente:

import Vue from 'vue'
import Vuex from 'vuex'
import firebase from 'firebase'
import router from '@/router'

Importamos vue, vuex, firebase (para poder hacer llamadas al signin/signup), router (para poder redireccionar a otras páginas).

Iniciamos con el store

Lo hacemos mediante:

Vue.use(Vuex)

Creamos el store

Estado

Tenemos las siguientes cuatro variables que controlan el estado de la aplicación:

state: {
  appTitle: 'My Awesome App',
  user: null,
  error: null,
  loading: false
},

Básicamente, podemos controlar el título de la aplicación, el usuario que está logueado, el mensaje de error en caso de que se produzca, y loading que sirve para deshabilitar botones mientras esperamos.

Mutaciones

Las mutaciones se encargan de cambiar el estado de forma controlada:

mutations: {
  setUser (state, payload) {
    state.user = payload
  },
  setError (state, payload) {
    state.error = payload
  },
  setLoading (state, payload) {
    state.loading = payload
  }
},

Vemos que podemos:

• asignar un usuario
• asignar un error
• asignar el loading

Son los setters

Acciones

Introducción

Las acciones son similares a las mutaciones. La diferencia reside en:

• las acciones hacen commit de mutaciones
• las acciones pueden contener operaciones asíncronas

userSignUp

Esta función es la que hace el SignUp

userSignUp ({commit}, payload) {
  commit('setLoading', true)
  firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password)
    .then(firebaseUser => {
      commit('setUser', {email: firebaseUser.user.email})
      commit('setLoading', false)
      router.push('/home')
    })
    .catch(error => {
      commit('setError', error.message)
      commit('setLoading', false)
    })
},

userSignIn

Esta función es la que hace el SignIn

userSignIn ({commit}, payload) {
  commit('setLoading', true)
  firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
    .then(firebaseUser => {
      commit('setUser', {email: firebaseUser.user.email})
      commit('setLoading', false)
      commit('setError', null)
      router.push('/home')
    })
    .catch(error => {
      commit('setError', error.message)
      commit('setLoading', false)
    })
},

autoSignIn

Esta función es la que se llama cuando se hace una recarga?

autoSignIn ({commit}, payload) {
  commit('setUser', {email: payload.email})
},

userSignOut

Esta función es la que se llama al hacer un SignOut

userSignOut ({commit}) {
  firebase.auth().signOut()
  commit('setUser', null)
  router.push('/')
}

Getters

Los Getters se usan para computar estados derivados:

getters: {
  isAuthenticated (state) {
    return state.user !== null && state.user !== undefined
  }
}