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:

is Llama really as bad as people say? I put Meta’s AI to the test

Is Llama really as bad as people say? I put Meta’s AI to the test

Test out Meta’s AI model, Llama, on a real CRUD frontend projects, compare it with competing models, and walk through the setup process.

Chizaram Ken
Oct 29, 2025 ⋅ 11 min read
the future of ai agents might be SLMs

Small language models: Why the future of AI agents might be tiny

Rosario De Chiara discusses why small language models (SLMs) may outperform giants in specific real-world AI systems.

Rosario De Chiara
Oct 29, 2025 ⋅ 5 min read
You're doing vibe coding wrong: Here's how to do it right. A LogRocket article

You’re doing vibe coding wrong: Here’s how to do it right

Vibe coding isn’t just AI-assisted chaos. Here’s how to avoid insecure, unreadable code and turn your “vibes” into real developer productivity.

Chizaram Ken
Oct 28, 2025 ⋅ 11 min read

Exploring spec-driven development with the new GitHub Spec Kit

GitHub SpecKit brings structure to AI-assisted coding with a spec-driven workflow. Learn how to build a consistent, React-based project guided by clear specs and plans.

Emmanuel John
Oct 28, 2025 ⋅ 7 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

Hey there, want to help make our blog better?

Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

Sign up now