Espacios de nombres

👀 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.

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>  \\</template> ```js <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> </template> ```

si no les corre el código cambiar en views/ HomeView.vue ```js :status="profile.status" ```por ```js :status="status" ```      :status="status"