Vue this.$store undefined?

Question

Vue.js

import Vuex from 'vuex';

import state from './state';
import actions from './actions';
import getters from './getters';
import mutations from './mutations';
import modules from './modules';
import plugins from './plugins';

const store = () => {
    return new Vuex.Store({
        modules,
        state,
        mutations,
        actions,
        getters,
        plugins,
    });
};

export default store;


....


import store from './store';

new Vue({
    store,
    router,
    render: h => h(App), // в  компонентах this.$store undefined
}).$mount('#app');

state.js example

const state = {
    lang: 'en',
};

export default state;

Why is the store not defined in the components, although I am exporting and injecting into a Vue object?

Answer 1

Because you (it is not clear why) wrapped the creation of the store in a function. Call it when creating the root instance, or

export default new Vuex.Store({
  modules,
  state,
  mutations,
  actions,
  getters,
  plugins,
});