2022-11-02
2390
#vue
Ukpai Ugochi
26457
Nov 2, 2022 ⋅ 8 min read

How to consume APIs with Vuex, Pinia, and Axios

Ukpai Ugochi I'm a full-stack JavaScript developer on the MEVN stack. I love to share knowledge about my transition from marine engineering to software development to encourage people who love software development and don't know where to begin. I also contribute to OSS in my free time.

Recent posts:

Goodbye, messy data: An engineer’s guide to scalable data enrichment

Goodbye, messy data: An engineer’s guide to scalable data enrichment

Walk through building a data enrichment workflow that moves beyond simple lead gen to become a powerful internal tool for enterprises.

Alexandra Spalato
Oct 8, 2025 ⋅ 6 min read

DesignCoder and the future of AI-generated UI

From sketches to code in minutes, DesignCoder shows how AI-generated, hierarchy-aware UIs could change the way developers prototype and ship apps.

Rosario De Chiara
Oct 7, 2025 ⋅ 5 min read

Should you use if() functions in CSS?

It’s 2025, and CSS finally thinks logically. The if() function brings real conditional styling — no hacks, no JS workarounds. Here’s how to use it right.

Ikeh Akinyemi
Oct 7, 2025 ⋅ 16 min read
Typescript or Zod for Validation?

TypeScript vs Zod: Clearing up validation confusion

Learn when to use TypeScript, Zod, or both for data validation. Avoid redundant checks and build safer, type-sound applications.

Alexander Godwin
Oct 6, 2025 ⋅ 3 min read
View all posts

8 Replies to "How to consume APIs with Vuex, Pinia, and Axios"

  1. Hi, how do you handle api errors? How are they transported to the GUI when all handling takes place in the store?

  2. Hello! I mostly use bootstrap-vue dismissible alert (https://bootstrap-vue.org/docs/components/alert). This is an example of how I use it.

    {{error}}

    export default {
    name: “Login”,
    data() {
    return {
    email: “”,
    password: “”,
    errors: [],
    };
    },
    methods: {
    login() {
    this.$store.dispatch(“retrieveUser”, {
    email: this.email,
    password: this.password
    });
    this.$store.dispatch(“retrieveId”, {
    email: this.email,
    password: this.password
    });
    this.$store
    .dispatch(“retrieveToken”, {
    email: this.email,
    password: this.password
    })
    .then(response => {
    const errors = response.data.error;
    const token = response.data.token;
    if (errors) {
    this.errors.push(errors);
    } else
    this.$router.push({
    name: “Home”
    });
    });
    },
    }

    I hope this helps!

  3. “`
    {{gettersUser.id}} {{gettersUser.name}} {{gettersUser.address}} “`
    This makes no sense. It should be getUsers.
    “`
    {{ user.id }} {{ user.name }} {{ user.address }}
    “`

  4. Hi, is there a reason that in the same file in the getters you use state.users and in the actions you use this.users? It is confusing, and not interchangeable, I tried. Actions didn’t work with state.users. Thank you

Leave a Reply