How to pass computed property from component somewhere else

Question

I have working example from official site.

 computed: { filteredData: function () {} )

How to get filteredData (computed property) globally? Espiccially if I want to send it somewhere else. demo.$store contains only original properties, not computed. I see the only way to achieve this is demo.$children[0].filteredData. But that is not pure. By the way, im using vuex.

Possible duplicate of [One global data structure in Vue.js](http://stackoverflow.com/questions/41318800/one-global-data-structure-in-vue-js) — thanksd, May 03 '17 at 16:13

score 1 · Accepted Answer · answered May 03 '17 at 21:59

1

Computed data is only available to the current component. However you can use getters in Vuex and import that as computed property where ever is needed.

In vuex, you declare this:

getters: {
  filteredData (state) {
    return state.data.filter(x => x)
  }
}

and then, where you require it, you just imported:

import { mapGetters } from 'vuex'
export default {
  // ...
  computed: {
    ...mapGetters({
      filteredData
    })
  }
  // ...
}

answered May 03 '17 at 21:59

motanelu

3,945
1
14
21

Thank you, but dissapointed of this. Would be great if computed were placed in Vuex.store – user2879626 May 04 '17 at 08:48
But properties (data, computed, props) are component specific. If you need to compute things in vuex, you can use getters for that. – motanelu May 04 '17 at 09:14
Would it be possible to use an EventBus instead of vuex for this? – Akin Hwan Mar 26 '18 at 15:39

How to pass computed property from component somewhere else

1 Answers1