0

I have an application that displays a google map with places autocomplete controller added to it just like this example from google

when an address is searched and selected, or the map bounds are changed I call algolia search, which has an event of onResult, that is fired when it received a response.

I am trying to turn this all into VUE js components. I have managed to get a google maps component and an autocomplete component.

I load the autocomplete first and then have the mounted section of the google maps attach it as a controller.

Where I start to fall down is the interoperability between the components.

I.E on place change which is an autocomplete event. I need to recentre the map and make the search.

But if they are two different components I can't get a reference to the google map.

when I bring the agolia search in to play, that also needs reference to the map when the event fires to pass the marker to it.

I started trying to use a simple view store, but this seems like I am tightly coupling the components.

Have I missed something or are simple stores and global event buses the way to go?

JaChNo
  • 1,493
  • 9
  • 28
  • 56
  • 3
    Did you tried to use VueX ? To make 2 differents components communicate, it is better to use VueX. https://vuex.vuejs.org/ – Zysce Aug 22 '18 at 16:52
  • I don’t know what that is. But I will have a read up. – JaChNo Aug 22 '18 at 16:53
  • Vuex is a state management pattern + library for Vue.js applications. It is exactly for what you are doing and it is inadvisable to make your own solution for this functionality - def. use Vuex. – DrCord Aug 22 '18 at 16:59
  • Possible duplicate of [Communication between sibling components in VueJs 2.0](https://stackoverflow.com/questions/38616167/communication-between-sibling-components-in-vuejs-2-0) – Emile Bergeron Aug 22 '18 at 17:30

1 Answers1

0

TL;DR;

Vuex may solve your problem, but need to see more code to know what's going on

There are multiple ways of achieving this, but I'll only list two.

Global State Management (Vuex), and props/listeners

Global State Management (Vuex)

If you know you'll only have one instance of each of the components (one map, one autocomplete) this is easy, fast, and reliable solution. The two components do not need to know about each other, they both deal with the global store. The autocomplete will update the data in the store, and the map will be notified whenever the variables it subscribes to change, and update accordingly.

The downside is...
Using vuex makes it harder to reuse and components.. Once you have more than one instance (ie. two autocompletes and two maps) then you may run into some issues, so you'll need to add additional complexity.

Props/Emit

If the two components have a direct connection, either siblings or parent-child relation, using this interaction (IMHO) is preferred.

The autocomplete component can have an @change or even a v-model set up, that parent component would link to the map component using a prop.

It seems like you may be doing it this way, which is not wrong, but without seeing any code, it's hard to make an assessment.

Daniel
  • 34,125
  • 17
  • 102
  • 150