DEV Community

Discussion on: When Why and How to use Vuex

jessachandler profile image
Jess Chandler

I'm hoping that your question was resolved, but just in case:

You would use axios in your store to go and get data from the API. For example:

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import VueAxios from "vue-axios";

Vue.use(VueAxios, axios);

export default new Vuex.Store({
  state: {
    users: [],    
actions: {
    loadUsers({commit}) {
      Vue.axios.defaults.baseURL = "";
      Vue.axios.get('users').then(result => {
      }).catch(error => {
        throw new Error(`API ${error}`);
  mutations: {
    SAVE_USERS(state, users) {
      state.users = users;
Enter fullscreen mode Exit fullscreen mode
napoleon039 profile image
Nihar Raote Author

I know we can do this without Vuex as well. Is there a scenario where one would need Vuex for this? I can see how using an action would make it easy to post and get data from a data source. Are there any other scenarios?

Thread Thread
dylajwright profile image

I agree with you here. When using Vuex it is supposed to manage a state that passes across multiple components. Dropping Axios into the store to make API calls works but is it really necessary?

I am just getting into Vue, like you, so not sure if my opinion comes with any value. However, with my experience, I prefer to keep things in the "separation of concern". I have created an HTTP Service that serves as the base HTTP Model where I add headers, base routes, etc. and any customization to the route I override the base for the route in use.

Again this route seems like it has value with Users, but I think it should be more clear on the example. What if you're getting something unique to a single component? You're not going to want or need to drop that into the store. I am also very hesitant to mutate the state within the store. Seems like it goes against the principle of the store. The state is a snapshot in time when would you need to manipulate that?