Why Vue doesn't see vuex?

Question

I work with microfrontend single-spa (https://single-spa.js.org/) I create a store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {
 count: 0
},
mutations: {

}
})

in src/main.js i import it

import Vue from 'vue';
import singleSpaVue from 'single-spa-vue';
import 'devextreme/dist/css/dx.light.css';
import App from './App.vue';
import store from './store';
console.log("🚀 ~ file: main.js ~ line 6 ~ store", store)

Vue.config.productionTip = false;
Vue.prototype.$bus = new Vue();

const vueLifecycles = singleSpaVue({
 store,
 Vue,
 appOptions: {
  render(h) {
  return h(App, {
    store,
    props: {
    },
  });
 },
},
});

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;

in console.log store displayed, but in the app cnsole.log(this) does not contain store

I don't understand where I am connecting wrong?

Answer 1

According to the docs, store should be a subproperty of appOptions:

const vueLifecycles = singleSpaVue({
  // store, ❌
  Vue,
  appOptions: {
    store, ✅
    render(h) {
      return h(App, {
        // store, ❌
        props: {},
      })
    },
  },
})