Vuex data from API Error

Vuex data from API Error

Hi guys, im new to this awesome framework and im trying to share data between all components

Hi guys, im new to this awesome framework and im trying to share data between all components


store.js

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
Vue.use(Vuex);

const URL = 'https://randomuser.me/api/';

export const store = new Vuex.Store({ state: { distribuidor: {} }, actions: { loadDatos({ commit }) { axios.get(URL).then((response) => { console.log(response.data.results[0], this) commit('setDatos', response.data.results[0])
}) } }, mutations: { setDatos(state, distribuidor) { state.distribuidor = distribuidor } } });

one of my components (HeaderSitio.vue)

<template>
    <div><h1>Hola {{ Nombre }}</h1></div>
</template>

<script> import {mapState} from 'vuex'; export default { computed: { ...mapState(['distribuidor']), Nombre() { return this.distribuidor.name.first } }, created() { //console.log(this.$store) this.$store.dispatch('loadDatos') // dispatch loading } } </script>

<style> </style>

this is the error:


what am I doing wrong? Im thinking maybe the component loads before the dispatch, how can I dispatch before the component loads?

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

10 Best Vue Icon Component For Your Vue.js App

In this article, I will collect 10 Vue icon component to bring more interactivity, better UI design to your Vue application.

Collection of 10 Vue Markdown Component for Vue.js App in 2020

Markdown is a way to style text on the web. The 10 Vue markdown components below will give you a clear view.

Collection of 15 Vue Input Component for Your Vue.js App

Vue input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. In this article I will share 15 Vue input components to you.