通过 WebPack 在多个文件中使用 Vuex 存储答案

【问题标题】：Using Vuex stores across multiple files with WebPack通过 WebPack 在多个文件中使用 Vuex 存储
【发布时间】：2019-04-10 02:43:41
【问题描述】：

我正在构建一个 Web 应用程序，该站点的每个页面将包含 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 文件包含商店，并且 bootstrap 和 cart 正在导入它。 “doAsync”的细节并不太重要。我是 Vue 和 Vuex 的新手，可能并不完全了解 WebPack 的工作原理，因此非常感谢任何澄清和/或帮助使其正常工作！

【问题讨论】：

为什么需要多个vue实例？
好吧，主要是我想在 bootstrap.jsx 文件中的每个页面上设置和绑定一个“全局”组件，然后我想在他们的个人页面中拥有单个页面的组件js 文件，例如 cart.jsx。我主要想避免必须在每个页面的每个 js 文件中设置样板代码，而只需在全局文件中设置一次。
同样，上面的两个 DOM 绑定组件位于 HTML 的两个独立部分中。即使我切换到将它们放在一个文件中，我不需要两个 Vue 实例来绑定到 DOM 的不同部分吗？

标签： javascript vue.js webpack vuejs2 vuex

【解决方案1】：

为后代张贴。问题是文件是分开的，这意味着两个不同的文件中有两个独立的存储实例，它们彼此完全隔离，这就是为什么更新一个文件中的状态不会影响另一个文件的原因。结案。

【讨论】：