Can I have multiple states in a Vuex store?

Question

I have created a generic store for Products in my web app. Naturally there are very many different types of products the website needs to display on different pages. So I have ended up with multiple states to represent each one. Here is my store:

const state = {
    HomepageOffers:[],
    Product: []
};

const getters = {
    getHomepageOffers: (state) => state.HomepageOffers,
    getProduct: (state) => state.Product

};

const actions = {
    loadHomepageOffers({commit}) {          // get all products to be featured on homepage
        axios.get('/api/homepageoffers')
            .then(response => {
                commit('setHomepageOffers', response.data[0])
            }).catch(function (error) {
                console.log(error.response.data);
            }
        )
    },
    loadProduct(context, {ProductID}) {    // gets a single product based on ProductID passed in URL
        axios.get(`/api/${ProductID}`)
            .then(response => {
                context.commit('setProduct', response.data[0])
            }).catch(function (error) {
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
            }
        )
    }
};

const mutations = {
    setHomepageOffers(state, HomepageOffers) {
        state.HomepageOffers = HomepageOffers
    },
    setProduct(state, Product) {
        state.Product = Product
    }
};

export default {
    state: state,
    getters: getters,
    actions: actions,
    mutations: mutations
}

What is happening is that when a user goes to my /home page, the HomepageOffers state fills up with product data. Great.

When a user clicks on a particular product, the Product state gets filled with a single product item and then the /Product.vue component gets loaded in. Also great.

The only thing I noticed is that when a single product is fetched, the HomepageOffers state is not emptied - it still has all the products in. I guess this is how its supposed to work, but my question is: Is it safe/best practice to only have one state per store or am I okay with having multiple states in a store?

You can have as many states in your store as you want/need - you can even nest them into each other. — IVO GELOV, Mar 22 '20 at 19:49
But is it safe to do so? will i end up with memory/resource issues? i dont understand how vuex actually works... — volume one, Mar 22 '20 at 19:53
Think about Vuex like one big JavaScript object which is accessible from everywhere in your application - very much like if you had `$root.myStore` object. — IVO GELOV, Mar 22 '20 at 19:55
Yes it is correct usage. You can always make a mutation for clearing the state you want. The good practice is also to not keep things in store that are not needed. — Adam Orłowski, Mar 22 '20 at 21:06

score 5 · Answer 1 · answered Mar 23 '20 at 01:53

Think of Vuex like a global component having no template or UI; just one which makes its data accessible to all other components. The Vuex store provides a way for components to share "component stuff" (data and behavior) by putting it in one place.

This is especially useful when you want multiple unrelated components to have data that isn't specific to any one of them. For example, the logged in username. It would be nice to have that in one spot instead of duplicating it and trying to pass it around to every component that displays it or does something with it. They can all go directly to the store and retrieve it.

Any time you need to share data among components that don't have a parent/child relationship and can't emit events or pass props to each other, you probably have global data. Maybe the components are on different routes or in different sections, etc. With Vuex, they can all access global information, and methods, from a single source.

With that comparison in mind, the Vuex "component" becomes easy to understand but with different names:

state is just data
getters is just computed
actions is just methods

That's really all, conceptually. The major difference is that in Vuex you don't change state outside of mutations.

So just like you might have multiple data items or methods in a component, you might have multiple state items or actions in the store, and that's expected. If you did want to subdivide the store and dedicate certain portions to certain purposes or functionalities for easier management, you can do that too using Vuex modules, but it's all still global.

Can I have multiple states in a Vuex store?

1 Answers1