Cursos Empresas Blog Live Conf Eventos Precios

0:0016:58

Espacios de nombres

Curso de Vue.js: Manejo del Estado con Vuex

Clase 12 / 19

Ver clases

Espacios de nombres

Curso de Vue.js: Manejo del Estado con Vuex

Clase 12 de 19

Clase 12 / 19

Espacios de nombres

Curso de Vue.js: Manejo del Estado con Vuex

Clase 12 / 19

Ver clases

Uriel Solis Salinas

Hace 4 años

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.

Comentarios (6)6 comentarios

Ameth Ordoñez Erazo

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

Joseph Paucar

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?

Diana Martinez

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

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

Hace 2 años

Julian David Alzate Cuervo

Hace 3 años

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

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

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

Espacios de nombres

Espacios de nombres

Espacios de nombres

Progreso del curso

Introducción

Conceptos básicos

Organización de código

Modelo de datos

Cierre del curso

Espacios de nombres

Espacios de nombres

Comentarios