How to register store as global variable object?

Question

Currently I'm using a reactive store.js like so:

import {reactive} from "vue";

const re = reactive({})

export default {
    re
}

which then can be used in components like so:

<script setup>
import store from "../../../scripts/store";

store.re.hello = 'hello world'
</script>

Is there a way to register the store.re object in vue, so that:

1. it becomes globally available in all components without import and
2. re from store.re gets omitted to just store, when calling it? I find it unnecessary boilerplate

Answer 1

Considering you're using the composition api, you could make use of provide/inject

You would be then be able to write something like:

import {reactive} from "vue";
const re = reactive({})
provide('re', re)

and then resolve it from your components:

import { inject } from 'vue'
const count = inject('re')

In this way, you'll be also able to mock this dependency if you're going to test your component.