首页 > 解决方案 > Vuex、webpacker 和多个包之间的共享状态

问题描述

我目前正在开发一个使用 webpacker 的 Rails 项目。我希望能够创建小的动态组件并将它们包装在包中。我们希望能够将这些包用作我们服务器端呈现的 html 中的元素。虽然这可行(我们目前每个组件都有一个包),但我不知道在这些包之间共享 vuex 存储的最佳方式是什么。我猜这可以通过 webpacker 完成,但我不确定。

情况例如:

 dynamic_component_one data-id="abc"
 dynamic_component_two data-id="abc

 = javascript_pack_tag 'dynamic_component_one'
 = javascript_pack_tag 'dynamic_component_two'

基本上我想要实现的是

dynamic_component_1 和 dynamic_component_2 共享一个公共的 vuex 存储

我目前的解决方案存在以下内容,感觉非常hacky。我将 Vue 构造函数和 Vuex Store 注册到全局窗口对象,以便在不同的包中重用它们。

const vuex_store = new Vuex.Store({
  strict: true
});

window['vue'] = Vue
window['vuex_store'] = vuex_store

如果有人能指出我正确的方向,我将不胜感激。

标签: ruby-on-railsvue.jswebpackwebpacker

解决方案


推荐阅读