Yo hice una pequeña prueba con una fake API que me genera nombres de usuarios aleatorios:
Puedemos usarl async/await en los actions, pues son asincronos y podemos manejar promesas: Así quedaria el actions en el store:
mutations: {
updateUsername(state, newUsername) {
state.username = newUsername;
},
},
actions: {
async obtenerUsername({ commit }) {
const res = await fetch(`https://api.generadordni.es/v2/person/username`);
const data = await res.json();
//Un numero aleatorio del 0 al 9
const n = Math.floor(Math.random() * (9 - 0 + 1) + 0);
console.log(data);
commit("updateUsername", data[n]);
},
},
Luego en el ProfileView.vue agregue un botón que me llama al actions con un dispatch
<button @click="obtenerUser">Generar user</button>
Y este es el código del script en el mismo archivo (lo hice con composition API)
<script setup>
import { computed } from "vue";
import { useStore } from "vuex";
const store = useStore();
const username = computed(() => store.state.username);
const actualizar = (value) => store.commit("updateUsername", value);
const obtenerUser = () => store.dispatch("obtenerUsername");
</script>
