Использование Vuex хранит в нескольких файлах с WebPack

Question

Я создаю веб-приложение, и на каждой странице сайта будет 2 JS-файла, файл "bootstrap.js", который в основном является глобальным файлом на каждой странице сайта, а затем пользовательским JS-файлом. файл для каждой страницы. Иногда я хочу, чтобы эти файлы находились в одном хранилище Vuex, но когда я запускаю действие на одной странице, оно не отражается на другой. Кто-нибудь знает, как разделить магазин Vuex на нескольких страницах?

Мой пример - корзина для покупок, которую я строю. Я хочу, чтобы файл "bootstrap.js" использовал хранилище Vuex, используемое для корзины, чтобы на каждой странице отображалось, сколько элементов в корзине. Затем на некоторых отдельных страницах, таких как страница описания продукта, я хочу использовать тот же магазин корзины Vuex, чтобы добавлять товары в корзину и отображать общее количество в файле "bootstrap.js". Таким образом, код выглядит следующим образом:

global_store.jsx:

import Vue from 'vue'
import Vuex from 'vuex'
import { doAsync } from '../utils/ajax'

Vue.use(Vuex)

const GET_CART_ASYNC = {
  SUCCESS: 'GET_CART_ASYNC_SUCCESS',
  FAILURE: 'GET_CART_ASYNC_FAILURE',
  PENDING: 'GET_CART_ASYNC_PENDING',
}

export let cartStore = new Vuex.Store({
  state: {
    cart: undefined,
    loading: false,
  },
  mutations: {
    [GET_CART_ASYNC.SUCCESS](state, data) {
      Vue.set(state, 'loading', false)
      Vue.set(state, 'cart', data)
    },
    [GET_CART_ASYNC.FAILURE](state) {
      Vue.set(state, 'loading', false)
      Vue.set(state, 'cart', null)
    },
    [GET_CART_ASYNC.PENDING](state) {
      Vue.set(state, 'loading', true)
      Vue.set(state, 'cart', null)
    }
  },
  actions: {
    manipulateCart(store, action=null) {
      doAsync(store, `/cart/api`, GET_CART_ASYNC, action)
    } 
  }
})

boostrap.jsx:

import Vue from 'vue'
import { mapState } from 'vuex'
import { cartStore } from '../cart/global_store'

cartStoreGlobal.dispatch('manipulateCart')

new Vue({
  el: '#cart_display',
  store: cartStore,
  computed: mapState(['cart']),
  render(h) {
    if(this.cart === null) {
      return
    }
    var num_items = this.cart.map(cart_item => cart_item.quantity).reduce((accumulator, quantity) => accumulator + quantity, 0)
    return (
      <p class="navbar-text pull-right" id="mini-cart">
        <a class="button right" href="/cart">
          <strong>{num_items} items</strong> <span>$0.00</span>
        </a>
      </p>
    )
  }
})

cart.jsx

import Vue from 'vue'
import { mapState } from 'vuex'
import { CartView } from '../cart/cart_view'
import { cartStore } from '../cart/global_store'

// TODO: remove this as its already called in bootstrap.jsx, figure out how to use store singletons with webpack
cartStore.dispatch('manipulateCart')

new Vue({
  el: '#cart',
  store: cartStore,
  computed: mapState(['cart']),
  render(h) {
    return (<CartView 
      cart={this.cart} 
      remove_cb={(photo_id_to_remove) => cartStore.dispatch('manipulateCart', [{action: 'set', photo_id: photo_id_to_remove, quantity: 0}])}
    ></CartView>)
  },
})

Таким образом, файл global_store содержит хранилище, а загрузчик и корзина импортируют его. Детали doAsync не так важны. Я новичок в Vue и Vuex и, возможно, не до конца понимаю, как работает WebPack, поэтому любые разъяснения и / или помощь в его работе приветствуются!

Answer 1

Размещение этого для потомков. Проблема заключалась в том, что файлы были отдельными, то есть имелось два отдельных экземпляра хранилища в двух разных файлах, которые полностью изолированы друг от друга, поэтому обновление состояния в одном файле не повлияло на другое. Дело закрыто.