Why is data not being passed through Vuex?

Question

Vue.js

This is how I break it into bundles in the webpack.base.conf.js file:

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js',
    preloader: './src/preloader.js'
  }
...

Next, I create 2 files, respectively:
Main.js file:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
});

Preloader.js file:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import Preloader from './components/Preloader';
import store from './store';

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#preloader',
  store,
  components: { Preloader },
  template: '<Preloader/>',
});

store.js file:

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    preloader: true,
  },
  mutations: {
    disablePreloader(state) {
      state.preloader = false;
    },
  },
});

При окончании прелоадера запускаю this.$store.commit('disablePreloader') и вывожу каждую секунду результат в виде console.log(this.$store.state.preloader) в двух компонентах App и Preloader соответственно. При это происходит следующее:
Значение this.$store.state.preloader в компоненте Preloader = false (и это верно)
Значение this.$store.state.preloader в компоненте App = true (и это неправильно, то есть значение в App не поменялось, хотя используется один store вроде бы как).
Есть мысли у кого-нибудь по этому поводу?

Answer 1

You have two entry points in webpack. Accordingly, when webpack resolves dependencies, it will create two output files that you include apparently already on the page. These files are independent, each has its own view instance and its own instance of the store, they do not interact in any way and do not see each other.

Answer 2

import Vue from 'vue';
import Vuex from 'vuex';
import kakoitoModule from "./modules/kakoitoModule";
Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    kakoitoModule
  }
});

//kakoitoModule.js

const namespaced = true;
const state = {
    preloader: true,
};

const getters = {};

const mutations = {
      disablePreloader(state) {
          state.preloader = false;
       },
};
const actions = {};
export default {namespaced, state, getters, mutations, actions}