How can I pass Vuex data to app components as data?

Question

I know that I can access state of the app from within the components in the app but that means the component is not universal/standalone and it relies on the parent's data/state structure and I think that is wrong.

So I am wondering if I can somehow pass a selected part of the state, that the component represents, to the component as it's data(props?) without the component knowing it comes for the parent state and when the data is updated by the component the app'đ state will reflect this.

So for example if my app's state has data with with 'fields' and each of its values represent a form text field I would build a loop for each of them to create input components and pass/connect data from this 'fields' item into the component. The comonent has no idea where the data comes from or that it represents only a small portion of the whole app. The component only handles the data in its own context.

Some component, somewhere is going to have manage the state changes. If it's a universal component that will be used in many places then simply pass the state from the parent and emit events back out to the parent with the sync modifier. — Steven B.
I think you just described the intended architecture of Vue apps. Props come in, the component doesn't care where from. But instead of changing the value of props, the component emits events so that whoever owns the data can do so. A component only changes values in its own data. — Roy J
Thanks Roy for the comment, I think I get it now. The data are meant for local(component) scope and props from outside, correct? — user7174053
Please don't make more work for people by vandalizing your posts. By posting on the Stack Exchange (SE) network, you've granted a non-revocable right, under the CC BY-SA 3.0 license, for SE to distribute that content (i.e. regardless of your future choices). By SE policy, the non-vandalized version of the post is the one which is distributed. Thus, any vandalism will be reverted. — Makyen

nahoj nahoj · Accepted Answer · 2018-10-12T17:20:08

Give this a try:

data() {
   return { testing: [] }
}
beforeMount () {
 this.testing = this.stateTesting
},
computed: {    
   stateTesting () {
      return this.your_state_here
   }
}

How can I pass Vuex data to app components as data?

1 Answers