Espacios de nombres

Clase 12 de 19 • Curso de Vue.js: Manejo del Estado con Vuex

Ameth Ordoñez Erazo

student•

👀 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) { ... }
    }

Uriel Solis Salinas

student•

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.

Joseph Paucar

student•

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'](c)

Hay alguna forma de usarla dentro de un computed? o se puede realizar de esta forma? Tiene inconvenientes al usarlo asi?

Diana Martinez

student•

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.

Diana Martinez

student•

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.

Referi Games

student•

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);
      }
    },
  }

Alexander Flores Rayme

student•

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>

Julian David Alzate Cuervo

student•

si no les corre el código cambiar en views/ HomeView.vue

      :status="profile.status"
```por

```js
      :status="status"
```      :status="status"