0

The basic architecture is a server-side rendered HTML page with Vue.js handling the presentation layer of some, but not all, pages of the site. We are making something a bit like a Trello card or Github issue. The main data model is a “Task” object, which has various properties: progress-status, sub-tasks and comments.

Example of a 'task' object

We want to display these objects on the page, allowing the user to create and update them and their sub objects, which are rendered as separate components.

Our problem is in finding the right way to communicate changes from the objects to the backend server, and back again. We are using Axios to speak to our backend (which is running on Django Rest Framework).

Initially, we implemented a complex chain of watchers to track state changes in the app, allowing them to be emitted up through the hierarchy of Vue components to the Axios HTTP methods. However, this seems a little brittle and certainly complicated to maintain.

Should we instead be using Vuex to manage the state of the app? Or the simpler event bus pattern described in the documentation?

tony19
  • 125,647
  • 18
  • 229
  • 307
j4ffa
  • 55
  • 1
  • 8
  • This question is too broad for SO, but if it can help, I wrote a another answer on [Vue communication theory](https://stackoverflow.com/a/49702934/1218980). Vuex would definitely help, calling your endpoints through Axios within the store actions. – Emile Bergeron May 11 '18 at 02:05

2 Answers2

0

Your idea with complex chain of watchers is totally dangerous to scale up app. There will be a lot of problems with maintaining all emits especially when someone new will be in the project. You should keep all states that acts on application in Vuex, it's very simple to implement and this will give you great benefits in the future.

CaShiS
  • 235
  • 1
  • 13
0

I advise using Vuex. The EventBus is useful but not as organized as a Vuex store.

Tips on Vuex usage for your scenario:

  • I put all my API calls in my store's actions as well.
  • Break your store into modules to keep it even more organized.
  • Use computed properties in your components to use the store data.
sitesbyjoe
  • 1,861
  • 15
  • 21