DEV Community

When Why and How to use Vuex

Nihar Raote on November 24, 2018

What will you get from this article? This article attempts to teach you the popular store Vuex used in advanced, big and complex Vue.js ...

Read full post

Christopher Dosin • Nov 25 '18 • Edited

" ... or maybe you have a Single Page Application (SPA) that, of course, only has a single page. ..."
Heh? And how would you handle routes within a SPA without using vue-router? How should the user navigate? Maybe you should read again what a real SPA is :)

Lars Klopstra ⚡ • Nov 25 '18

I think he's really serious about the "only has a single page." 😂

Nihar Raote • Nov 27 '18

Tweaked that part a little. Thanks for pointing it out. I'm not an expert in Vue, so it really helps when someone tells me where I messed up 🙂.

D7460N • Nov 26 '19

Thanks for this article!

My (probably stupid) question is how would you use VueX to connect and manipulate an external data source?

Thanks again!

Jess Chandler • Mar 5 '20

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(Vuex);
Vue.use(VueAxios, axios);

export default new Vuex.Store({
  state: {
    users: [],    
  },
actions: {
    loadUsers({commit}) {
      Vue.axios.defaults.baseURL = "https://jsonplaceholder.typicode.com/";
      Vue.axios.get('users').then(result => {
        commit('SAVE_USERS', result.data);
      }).catch(error => {
        throw new Error(`API ${error}`);
      });
    },
  mutations: {
    SAVE_USERS(state, users) {
      state.users = users;
    }
  }
})

Nihar Raote • Mar 12 '20

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?

Dylan • Aug 26 '20

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?