Where do I store shareable data in vuejs? - vue.js

Question

I am building an app with various pages, and when users goes to /orgs I have a template that I require
// routes.js
...
import Orgs from './components/Orgs.vue';
...
{
path: '/orgs',
component: Orgs,
meta: { requiresAuth: true }
},
from here I have a simple template in Orgs.vue that looks like:
<template lang="html">
<div> {{orgs}} </div>
</template>
<script>
export default {
data(){
return {
orgs: [];
}
},
created() {
//use axios to fetch orgs
this.orgs = response.data.orgs;
}
}
</script>
The problem is that if I want to show list of organizations in other pages, I am bound to duplicate the same code for other pages as well, but I am trying to find a solution that would call return organizations so I can use that in multiple page?
What is the solution for this?

Answer 1

To make data available across the application use Vuex.
It is state management library which stores all the application data in a single source tree.
If you don't want to you vuex for the above issue, you can try mixins.
Mixins are best way to share functionality.
For the above case you can try a mixin like this.
organisation.mixin.js
const OrganisationMixin = Vue.mixin({
data: function () {
return { orgs: [] }
},
methods: {
fetchOrgs: function() {
// api to fetch orgs
this.orgs = result_from_api
}
}
mounted: function() {
this.fetchOrgs()
}
});
export default OrganisationMixin
Now let's use the mixin we just created.
In whatever_name_component.vue:
<template lang="html">
<div> {{orgs}} </div>
</template>
<script>
import OrganisationMixin from 'path_to_organisation.mixin.js'
export default {
mixins: [OrganisationMixin]
data(){
return { orgs: [] }
},
mounted() {
console.log(this.orgs) //provided by mixin` and value is equal to api response from mixin.
}
}
</script>