How to access Vue 3 global properties from the store

In Vue 2 I used to import Vue and access global properties like this (from the store):

import Vue from 'vue'    
Vue.config.myGlobalProperty

According to the new documentation, in Vue 3 the global properties are declared using the app object returned by createApp:

const app = createApp({})
app.config.globalProperties.myGlobalProperty

And then accessed in the child component by simply calling this.myglobalProperty

But how to access that global property from the store? I tried exporting/importing the app object but it doesn't work (probably due to the app being created after its import in the store).

With Vue 2 I used to use global properties in the store like this:
Declaration in the main.js file:

import Vue from 'vue'
Vue.config.myglobalProperty = 'value'

Usage in the store:

import Vue from 'vue'
Vue.config.myglobalProperty

Is there a good way to do that in Vue3?

I noticed a better way to provide/inject properties but it works with child component only and not with the store.

Solution

You could pass the app instance to a store factory:

// store.js
import { createStore as createVuexStore } from 'vuex'

export const createStore = (app) => {
  return createVuexStore({
    actions: {
      doSomething() {
        if (app.config.globalProperties.myGlobal) {
          //...
        }
      }
    }
  })
}

And use it in main.js like this:

// main.js
import { createApp } from 'vue'
import { createStore } from './store'

const app = createApp({})
const store = createStore(app)
app.use(store)
app.mount('#app')

If your store modules need access to the app instance, you could use the same technique above with a module factory:

// moduleA.js
export default (app) => {
  return {
    namespaced: true,
    actions: {
      doSomething() {
        if (app.config.globalProperties.myOtherGlobal) {
          //...
        }
      }
    }
  }
}

And import it into your store like this:

// store.js
import moduleA from './moduleA'
import { createStore as createVuexStore } from 'vuex'

export const createStore = (app) => {
  return createVuexStore({
    modules: {
      moduleA: moduleA(app),
    }
  })
}