Vuex modules for Async data in multiple places

Question

I have hard time to understand how to use Vuex correctly, and if I even should to use it in my case.

Let's say I have simple online shop build from components:

1. Products list.
2. Products filtering.

Without Vuex:

I can make Filtering as child component and List as parent component. Fetch async data in List and then pass it as prop (or v-model) to Filtering. Then it can pass back filtered products by $emit. And it works fine.

With Vuex:

Make Vuex store with module Products. Inside it all logic for fetching products from API and filtering it. Now components List and Filtering can be separated. Inside them use getters/actions from store with Products module. And it will work fine.

Do I understand it correctly?

But there is problem:

Let's say I wanna use Products API somewhere else, for example show couple recommended products. Without Vuex it will be simple. Just make separate component that will fetch recommended data.

But if I understand correctly main point of using Vuex is sharing data globally. So how can I have two separate lists from same Vuex Module? So when user will choose something in Filters it should filter only main list, and not recommended products.

Answer 1

It depends on the implementation.

For example, if you are using the API to pull all the data, and then filter client-side, then it would make sense to use vuex, since your components would update the filter and get the result. In the diagram below, load products is an asynchronous call that loads all the data, and then the application is making the relevant filtering specific to the component and potentially making it available to other compnents.

If you are making a call every time the filter changes and don't need to persist or share the data between components, there may be little benefit to using it.

Note that vuex is a tool which helps with managing global state, it's up to you to decide whether the data in your app benefits from utilizing it.