Почему не передаются данные через Vuex?

Question

[myskypesla]

Вот так в файле webpack.base.conf.js разбиваю на бандлы:

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

Далее создаю 2 файла соответственно:

Файл main.js:

// 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:

// 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:

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 вроде бы как).

Есть мысли у кого-нибудь по этому поводу?

Comments

[Orfen]

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}

Answer 1

[Evgeny Kulakov]

У вас две точки входа в вэбпаке. Соответственно, когда вебпак разрешает зависимости, он создаст два файла на выходе, которые вы подключаете видимо уже на страницу. Эти файлы независимы, в каждом свой экземпляр вью и свой экземпляр сторы, они никак не взаимодействуют и не видят друг друга.

Answer 2

[Orfen]

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}