Obtener el token

store de modules/oauth.js :

import { getToken } from '@/api/oauth'
// mutations
export const SET_ACCESS_TOKEN = 'setAccessToken'
// actions
export const GET_TOKEN = 'getToken'

const state = {
  accessToken: null
}

const mutations = {
  [SET_ACCESS_TOKEN] (state, payload) {
    state.accessToken = payload
  }
}

const actions = {
  async [GET_TOKEN] ({ commit }) {
    try {
      const { data } = await getToken()
      console.log(data)
    } catch (e) {
      commit(SET_ACCESS_TOKEN, null)
      throw new Error('Error OAuth', e)
    } finally {
      console.info('Done!')
    }
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

Hasta ahora todo bien, lo que si es que me gustaría que se explicara más a profundidad lo de los modulos de Vuex ya que ni en el curso básico ni el profesional ni el avanzado con firebase lo explicaron.

Aún así, aquí dejo lo que entiendo de las rutas con namespace:

El namespace es para que puedas llamar a los actions usando una ruta entera y no solo a la función, es útil porque así cuando veas que en el código se llama a tal acción sabrás a qué módulo pertenece, si no usas namespace es como tener un arsenal de actions dispnibles tal como los tendrías en Vuex y todas desordenadas

Aún así me gustaría que me explicaran bien la sintaxis de import * as oauth from ‘@/api/oauth’ ¿Cuál sería la diferencia si simplemente pongo import oauth from ‘@/api/oauth’?

Hola.
Me sale el siguiente error. No se que podrá ser.

Me aparece el siguiente error en consola, a pesar de que en postman sí me devuelve el valor del token, en la app me aparece vacío el objeto:

[Vue warn]: Error in created hook: “TypeError: api_oauth__WEBPACK_IMPORTED_MODULE_1_.getToken is not a function”

(found in <Root>)
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
callHook @ vue.runtime.esm.js?2b0e:4219
Vue.init @ vue.runtime.esm.js?2b0e:5008
Vue @ vue.runtime.esm.js?2b0e:5085
eval @ main.js?56d7:19
./src/main.js @ app.js:1160
webpack_require @ app.js:854
fn @ app.js:151
1 @ app.js:1269
webpack_require @ app.js:854
checkDeferredModules @ app.js:46
(anónimo) @ app.js:994
(anónimo) @ app.js:997
vue.runtime.esm.js?2b0e:1888 TypeError: api_oauth__WEBPACK_IMPORTED_MODULE_1.getToken is not a function

Estoy en la versión de vue 3 y la configuración del archivo store/index.js me bastó con importar el modulo y agregarlo en sección de modules. Ejemplo:

//Importamos el modulo
import oauth from "./modules/oauth";
import { createStore } from "vuex";

export default createStore({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
   //Aqui agregamos el modulo
    oauth,
  },
});

me genera el token pero en consola me aparece:

[vuex] unknown local mutation type: SET_ACCESS_TOKEN, global type: oauth/SET_ACCESS_TOKEN

Si alguien tiene problemas con Vuex y en la consola les sale sl siguiente error:

[vuex] unknown action type: oauth/getToken

Es porque, al menos para mi me funciona si escribo la parte de ‘oauth’ así que solo escribe el nombre del metodo getToken y funcionará.

Saludos!

Una consulta, cada vez que se recarga la página se está pidiendo el token, sé que store sólo guarda en memoria y sé que se podría usar el localstorage para persistir el token hasta que caduque, mi pregunta es cómo combinar ambas cosas ya que me gusta mucho usar vuex. Saludos.

Es bueno crear una función dentro de cada módulo del Store llamada initialState, esto es útil para reiniciar el estado del store, es especialmente útil cuando se tienen muchos campos en el state

const initialState = () => ({
  accessToken: null
})

Podemos tener algo como esto:

export default {
  namespaced: true,
  state: initialState(),
  mutations: {
    RESET (state) {
      state = initialState()
    }
  },
  actions: {}
}

Justo hace una semana estaba pensando en: “estaría bueno encontrar un curso donde modularicen el vuex para aprender a hacerlo”.
EXCELENTE! Gracias

Tenía algun tiempo sin reiniciar mi Ubuntu y no quería funcionar. Reinicias y trabaja perfectamente.

Ta bueno el curso!

Excelente curso. Tengo una duda. Estoy intentando refresh el servidor con crtl + c para que no me de error de babel-lint cuando hago los cambios. Tuve que reiniciar el pc para poder ver la pagina online nuevamente y los cambios. No entiendo porque con crt+c no es suficiente para actualizar.

Ese lint… un espacio, un tab, te marca error… te obliga repararlo, menos mal que no es mi ajeiv, lo mando alv.

Buenas!
No se pierdan este vídeo que está genial la explicación:
https://vuex.vuejs.org/#what-is-vuex

Tengo un “problema” que realmente no se si sea eso. Al momento de revisar en Vue DevTools los commits hechos por Vuex, no veo reflejados los cambios en la consola.

Código
modules\oauth.js

import * as oauth from '@/api/oauth'

export default {
  namespaced: true,
  state: {
    accessToken: null
  },
  mutations: {
    SET_ACCESS_TOKEN(state, payload) {
      state.accessToken = payload
    }
  },
  actions: {
    getToken({ commit }) {
      oauth
        .getToken()
        .then(res => {
          commit('SET_ACCESS_TOKEN', res.access_token)
        })
        .catch(err => {
          commit('SET_ACCESS_TOKEN', null)
          console.log(`Error OAuth: ${err}`)
        })
        .finally(() => {
          console.log('Done!')
        })
    }
  }
}

main.js

new Vue({
  router,
  store,
  created() {
    this.init()
  },
  methods: {
    init() {
      store.dispatch('oauth/getToken', null, { root: true })
    }
  },
  render: h => h(App)
}).$mount('#app')

Hola me sale este error cuando se hace el dispatch

{"error":"unauthorized","error_description":"An Authentication object was not found in the SecurityContext"}

Recomendaciones para evitar errores en esta sección:
PROBAR EN POSTMAN el procedimiento citado en la sección #6 para traer el token y descartar que el prosible fallo esté en dicha sección.

Hola! Hay alguna forma de hacerlo como un backend for frontend? me preocupa que desde el cliente puedan llegarle a las credenciales (clientId y secretKey). Con las DevTools uno puede ver los parámetos que se envían.

Existen varias formas de hacer esto. Vamos a aprender a llamar a una acción (dispatch) de Vuex desde la instancia principal de Vue, que aunque no es la mejor forma de hacerlo, a efectos prácticos es muy efectivo. ¿Cual seria la mejor manera de hacerlo? . Me interesa las buenas practicas 👀

no entiendo casi nada de tokens como ven soy mas front end que backen es algo muy nuevo para mi seria vacano con videos

el usode {commit} no entiendo , en pinia cual serai su equivalente o no hace falta

Hice una aplicación usando firebase y los datos de usuario los guardé en una variable del store de vuex. Cuando necesitaba cambiarla solo hacía store.state.currentUser=“algo” sin usar mutations y actions. Entiendo el concepto, pero qué desventaja tiene si no las uso y solo modifico directamente el store de vuex? Aclaro que funciona sin problemas toda la aplicación.

NOTA IMPORTANTE
Para los que les sale este error:

[vuex] unknown local mutation type: SET_ACCESS_TOKEN, global type: oauth/SET_ACCESS_TOKEN

Deben cambiar en /store/modules/oauth.js la palabra mutation por mutations

Para los que están usando Vue3, este es el dev tools que tienen que instalar:
https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
Aún no hay soporte para vuex pero pueden agregar este logger al store para ver que es lo que está pasando:

import { createStore, createLogger } from 'vuex'
.
.
.
export default createStore({
  state,
  getters,
  actions,
  mutations,
  plugins: process.env.NODE_ENV !== 'production'
    ? [createLogger()]
    : []
})

Hola.
A alguien le paso que le aparecio este error?:

[vuex] unknown local mutation type: SET_ACCESS_TOKEN, global type: oauth/SET_ACCESS_TOKEN

Porque no se como solucionarlo y no puedo continuar con el curso.
El error sale en la consola.
Gracias.

Lectura número siete: creo que mi ser a empezado a generar un fuerte odio hacía lint, espero que solo sea temporal.

PSDT: npm run lint ha sido mi salvador en este camino.