2đź‘Ť
If you want to pass data from your component to the Vuex $store, you should use Mutations (or actions, if the data comes into your component asynchronously).
Assuming your mutation has already been defined in the store (and the store has been set up correctly), you can call it from your component as follows:
this.$store.commit(“YOUR_MUTATION”, “data”)
I do recommend the vue-tools in your browser to keep track of what’s in your store.
1đź‘Ť
I know no Vue, but I believe I understood what you’re looking for.
What you’re trying to achieve here, in every other front-end framework, can be called like: “component to parent communication”.
You can have a 4th level nested component and you want to pass some data to the Main.js (that I suppose, in Vue, it’s still a component, precisely the root one)
As I see, you can use $emit: https://forum.vuejs.org/t/passing-data-back-to-parent/1201
In React (and you can do this in Vue too, but you should choose the vue style solution) you would use a callback function: the parent pass to the child a function that the child can call to set a certain property inside the parent comp.
Another common option nowadays, that avoids completely this kind of communication, is the use of a state management lib like Redux. In that every component can access a global store (that is like a global variable) and after the 4th level component set a property in this global store, the main.js can read it.