Very simple Vue state without Vuex

README.me

Somehow I never really got used to Vuex. 
I never really had a use case for state that needed to be reactive and had to be shared between components far away.
And Vuex always felt like global variables... brrrr...

But now it bit me - I wanted to have dynamic breadcrumbs. 
The content was calculated in a component deep inside the app.

But - did you know?
When you manage to put one simple JavaScriopt object into two different Vue components, it becomes reactive!
So when you change it in one component, it automagicaly get updated in the other.

No need for Vuex so far.
Simple and no boilerplate actions and commits, and so on... ;-)

Header.vue

<template>
    <div style="display: flex; justify-content: flex-start;">
      {{ store.breadcrumb }}
    </div>
</template>

<script>
import store from 'Store.js'

export default {
    name: "Header",
    data() {
        return {
            store: store
        }
    },
}
</script>

Store.js

export default {
  breadcrumb: ""
}

Tab.vue

<template>
  ...
</template>

<script>
import store from 'Store.js'
import api from '@/api'

export default {
  name: 'Tabs',
  data() {
    return {
      store: store,
    }
  },
  async mounted() {
    this.project = await api.findFirst('project', { 
      and: { id: this.$route.params.id },
      with: { customer: {one: 'organisation', this: 'customer_id'} }
    })
    this.store.breadcrumb = `${this.project.customer.name}: ${this.project.name}`
  },
  destroyed() {
    this.store.breadcrumbs = ""
  }
}
</script>