CODEWITHSUNDEEP
vue.jsvuejs2vuexvuex-modules
volume one
volume one

Reputation: 7581

Can I have multiple states in a Vuex store?

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?

Upvotes: 2

Views: 4362

Answers (1)

Dan
Dan

Reputation: 63139

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.

Upvotes: 5

Related Questions