0

I am building a vuejs app with webpack, vuex and vue-router.

My Project structure looks like this:

[components]

  • BlockingLayer.vue

[store]

  • index.js

[restapi]

  • index.js

App.vue

main.js

I'm using BlockingLayer.vue inside of App.vue. App.vue has methods to show/hide BlockingLayer.

Now I want to be able to trigger those methods from the [restapi] index.js - how do I do that?

I tried importing App.vue inside my restapi module - doesn't work. Meanwhile importing store inside restapi works flawlessly. Importing restapi inside store and using it there also works just fine. What I could do is using a variable inside the store instead of inside App.vue to show/hide the BlockingLayer I guess, but that's not really what store is meant to be used for I would say...

Danmoreng
  • 2,367
  • 1
  • 19
  • 32
  • 1
    **Vuex** is a **state management** extension/plugin to **Vue**. It's supposed to **store states**. A layer being shown/hidden - that's a state in your app. I think it's OK to store that state in a state management tool. – muka.gergely Feb 26 '20 at 10:29
  • your approach is correct to store a state in Vuex. However, one concern is why do you want to trigger vue methods in restapi/index.js when you can do that in the vue components which call that api – Jake Lam Feb 26 '20 at 11:09
  • Does this answer your question? [Communication between sibling components in VueJs 2.0](https://stackoverflow.com/questions/38616167/communication-between-sibling-components-in-vuejs-2-0) – Keimeno Feb 26 '20 at 12:30

1 Answers1

0

I'm using vuex to store the state of BlockingLayer and vuex actions to show/hide it instead of having the state stored in App.vue now. Works like a charm.

Danmoreng
  • 2,367
  • 1
  • 19
  • 32