Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

15D
17H
1M
33S

Obtener el token

7/27

Lectura

En el fichero main.js tenemos la instancia principal de Vue. Aqu铆 es donde vamos a trabajar para obtener el token y posteriormente guardarlo en el Store con Vuex.

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 27

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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: 鈥淭ypeError: 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 鈥榦auth鈥 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: 鈥渆star铆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 鈥減roblema鈥 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

Estoy haciendo el proyecto con vue 3 y asi queda usando Pinia (ultima version de vuex que ya utiliza la api de reactividad de vue 3 por lo tanto no es necesario utilizar mutations) ```js import { defineStore } from 'pinia' import { getToken } from '../api/oauth' const useOauth = defineStore('token', { state: () => { return { accessToken: null } }, actions: { async getToken() { await getToken() .then(({ data }) => this.accessToken = data) } } }) export { useOauth } ```Y ya con esto podemos utilizar en cualquier parte de nuestra aplicacion 馃槉

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=鈥渁lgo鈥 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.