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

i building app various pages, , when users goes /orgs have template require

// routes.js ... import orgs './components/orgs.vue'; ...  {   path: '/orgs',   component: orgs,   meta: { requiresauth: true } }, 

from here have simple template in orgs.vue looks like:

<template lang="html">   <div> {{orgs}} </div> </template>  <script> export default {    data(){     return {       orgs: [];     }    },    created() {      //use axios fetch orgs        this.orgs = response.data.orgs;       } } </script> 

the problem if want show list of organizations in other pages, bound duplicate same code other pages well, trying find solution call return organizations can use in multiple page?

what solution this?

to make data available across application use vuex. state management library stores application data in single source tree.

if don't want vuex above issue, can try mixins. mixins best way share functionality.

for above case can try mixin this.

organisation.mixin.js

const organisationmixin = vue.mixin({     data: function () {         return { orgs: [] }     },     methods: {         fetchorgs: function() {         // api fetch orgs           this.orgs = result_from_api         }     }     mounted: function() {         this.fetchorgs()     } }); export default organisationmixin 

now let's use mixin created.

in whatever_name_component.vue:

<template lang="html">   <div> {{orgs}} </div> </template>  <script> import organisationmixin 'path_to_organisation.mixin.js' export default {    mixins: [organisationmixin]    data(){     return { orgs: [] }    },    mounted() {      console.log(this.orgs) //provided mixin` , value equal api response mixin.    } } </script>