Sharing data between components in vue.js

In order to access shared data, the most common way is to use Vuex. I'll get you going with the super basics with a module system as it does take a little reading.

npm install vuex --save

Create new folder called store in the src directory.

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import example from './modules/example'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    example // replace with whatever you want to call it
  }
})

src/main.js

// add to your imports
import store from './store/index'
...

// Change your Vue instance init
new Vue({
  router,
  store, // <--- this bit is the thing to add
  render: h => h(App)
}).$mount('#app')

/src/store/modules/example.js

// initial state
const state = {
  info: []
}

// getters
const getters = {}

// actions
const actions = {
}

// mutations
const mutations = {
  set (state, newState) {
    state.info.splice(0)
    state.info.push.apply(state.info, newState)
  }
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

To update the store when you get info, from any component you can use this.$store.commit('example/set', infoArray) where the first parameter follows the pattern of module name/mutation function name, and the second parameter is the 'new state' that you want updated.

To access the data from the store, you can access it from your components as a computed property:

computed: {
  info () {
    return this.$store.state.example.info
  }
}

Obviously you can use getters and actions and other stuff, but this will get you going and you can read up and modify the Vuex store once you get comfortable and understand how it works.

Let's say if you do not want to use any other state management like vuex then you can share with the use of mixins.

Well, you can achieve it with the use of Vue.mixins.

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixins will be “mixed” into the component’s own options.

Mixins official docs

Hope this helps!