Vue.js: How to pass in data that isn't a parent / access vue methods?

Question

I\'m working on a simple timer app. I\'m getting 3 pieces of data from the server: timers, projects and users. I believe I\'m looping through timers correctly, but I\'m not

Answer 1

This is the standard case when you should be going for a centralised state management. As you have data which is going to be used by multiple components, If the data flow is just limited to one way: parent to child, it can be manageable, but as soon as you get the requirement of updating the parent data when child changes it, or worse, updating the sibling data when another sibling changes it, it becomes messy.

Vue provides it own Flux like implementation, but the general practice is to go with vuex. With this, you store all your projects/users etc in vuex state, and each component can read/update from the central state. If its changed by one component, updated version is available to all components reactively. You can initiate the data in one place using actions in vuex itself.

Following is the architecture diagram:

You can have a look at my answer here on similar question and have a look at example on how to call api and save data in store.