Data architecture when using Vuex

Question

I just started using Vuex while reading about the Flux Pattern. I think I understood how it works but I'm not sure how to implement it in my projects. 

Let's say I got a usermanagement application. All users are stored in a backend and retrievable via a REST API. Without Vuex I would fetch all members for a list, get single members for update and post/put or delete them after edit. But now with Vuex: Should I fetch all Members, store them in den Vuex Store and send HTTP-Updates whenever the Vuex Store updates? Or is this not what the Vuex Store is ment to be?

I'm thankfull for your ideas, thoughts or links. :)

Prasad Patil · Accepted Answer

Vuex Store is meant primarily to deal with your Application Global State. Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. You "store" the "global state" somewhere and many components can share the same information. And when it's time to mutate it, vuex handles that. Following a similar pattern to Flux/MobX/Redux (within this comparison it is maybe more MobX alike, but nevermind). See getters to learn how to share data between components: https://vuex.vuejs.org/guide/state.html The real question is: Do you need to share the list of users from different components? If not, you probably don't need Vuex for that (but you can use it, anyway). If you need to update that collection of users (and display that information from more than one place), you probably should define an API (web services) layer first. And if you need to make async calls, they should be done *from vuex actions* (Actions are async and Mutations are sync). Take a look at this official example that uses web services in a Chat application, from Evan You: https://github.com/vuejs/vuex/blob/master/examples/chat/vuex/actions.js Hope this solves your doubts.

Vue JS

Similar Discussions

Deploying Vue JS application

Communication between Vue Components

How to edit the vuepress default theme?

On a mission to build Next-Gen Community Platform for Developers

Facebook

Twitter

Linkedin

Instagram