Espacios de nombres
Contenido del curso
Espacios de nombres
Contenido del curso
Ameth Ordoñez Erazo
Uriel Solis Salinas
Joseph Paucar
Diana Martinez
Diana Martinez
Referi Games
Alexander Flores Rayme
Julian David Alzate Cuervo
👀 Solo para aclarar: Se puede acceder al módulo global desde los getters y los actions, utilizadando rootState y rootGetters, pero no se pueden acceder directamente desde las mutations, para eso tenemos que crear un actions que llame a la mutations en el contexto global pasando { root: true } como tercer argumento a dispatch y commit.
actions: { someAction ({ dispatch, commit, getters, rootGetters }) { dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction' commit('someMutation', null, { root: true }) // -> 'someMutation' }, someOtherAction (ctx, payload) { ... } }
Espacios de nombres
.
Los espacios de nombres (namespaces) en Vuex son una característica que permite organizar los módulos en grupos lógicos y separados. Cuando se utiliza un espacio de nombres, todos los nombres de las mutaciones, acciones y getters de un módulo se prefijan con el nombre del espacio de nombres, lo que evita posibles conflictos de nombres entre módulos.
.
Para utilizar un espacio de nombres en un módulo, se debe definir la propiedad namespaced en el objeto del módulo y establecerla en true. Por ejemplo:
const myModule = { namespaced: true, state: { count: 0 }, mutations: { increment(state) { state.count++ } }, actions: { incrementAsync({ commit }) { setTimeout(() => { commit('increment') }, 1000) } }, getters: { getCount: state => state.count } }
En este ejemplo, se establece la propiedad namespaced en true en el objeto myModule, lo que indica que se debe utilizar un espacio de nombres para todas las mutaciones, acciones y getters de este módulo.
.
Para acceder a una mutación, acción o getter en un módulo con espacio de nombres, se utiliza la sintaxis de diagonal y se incluye el nombre del espacio de nombres antes del nombre de la mutación, acción o getter. Por ejemplo:
...mapState('myModule/count') // llama el estado count en myModule ...mapActions('myModule/incrementAsync') // llama a la acción incrementAsync en myModule
Otra forma de acceder:
...mapState('myModule', ['count']) ...mapActions('myModule', ['incrementAsync'])
En resumen, los espacios de nombres en Vuex se utilizan para organizar los módulos en grupos lógicos y separados, lo que evita posibles conflictos de nombres entre módulos. Al definir la propiedad namespaced en true en el objeto del módulo, se indica que se debe utilizar un espacio de nombres para todas las mutaciones, acciones y getters de ese módulo.
Tengo una duda, estoy utilizando script setup para hacer los ejercicios y entiendo que para acceder a los getters se utiliza la funcion computed, ej:
const firstname = computed(() => store.getters['profile/firstName'])
Pero para este caso utilizamos un parametro y no encuentro forma de usarlo dentro de una computed, lo que me funciono es lo siguiente:
const firstname = (c) => store.getters'profile/firstName'
Hay alguna forma de usarla dentro de un computed? o se puede realizar de esta forma? Tiene inconvenientes al usarlo asi?
Los getters y los computed son dos cosas separadas, un getter es una función para leer un valor directamente del estado del componente, un computed es una función reactiva que permite calcular nuevos valores a partir de otros existentes, por ejemplo, puedes tener un estado con los valores de firstName y lastName, y tener getters directos a ellos, pero si quisieras hacer un fullName que sea una referencia a los dos anteriores, entonces implementar una computada para formarlo y que sea reactivo a los cambios de los valores que depende.
Y sobre la sintaxis, si se ejecuta, se puede, ya la experiencia te irá diciendo si una u otra forma válidas de código, te sirven mejor o peor.
Sí no les sirve al final, solo corrige el actions.
actions: { async updateUsername({ commit, state, rootState }, username) { console.log("update username action!", state.username, username); const user = await getUsers(1); console.log(user); commit(COMMIT_UPDATE_USERNAME, user.username); if (state.username) { commit(COMMIT_SET_STATUS, "active", { root: true }); console.log("status", rootState.status); } }, }
le agregue un boton para generar un nombre aleatorio<script setup>import { computed } from "vue";import { useStore } from "vuex"; const store = useStore(); const username = computed(() => store.state.profile.username); const updateUsername = (value) => { store.commit("profile/updateUsername", value);}; const getUsername = () => { return store.dispatch("profile/getUsername");};</script><template> <div class="profile"> <div class="box"> <img src="/avatars/avatar.jpg" alt="avatar" /> <label for="username">Nombre de usuario</label> <input type="text" placeholder="Jane Smith" :value="username" @input="updateUsername($event.target.value)" /> <button @click="getUsername">Nombre aleatorio</button> <button @click="$router.push('/')">Acceder</button> </div> </div></template>
<script setup> import { computed } from "vue"; import { useStore } from "vuex"; const store = useStore(); const username = computed(() => store.state.profile.username); const updateUsername = (value) => { store.commit("profile/updateUsername", value); }; const getUsername = () => { return store.dispatch("profile/getUsername"); }; </script> <template> <div class="profile"> <div class="box"> <img src="/avatars/avatar.jpg" alt="avatar" /> <label for="username">Nombre de usuario</label> <input type="text" placeholder="Jane Smith" :value="username" @input="updateUsername($event.target.value)" /> <button @click="getUsername">Nombre aleatorio</button> <button @click="$router.push('/')">Acceder</button> </div> </div> </template>
si no les corre el código cambiar en views/ HomeView.vue
:status="profile.status" ```por ```js :status="status" ``` :status="status"
