我正在使用 Vue.js 2.0 开发一个应用程序。和用于状态管理的 Vuex。我需要实现所谓的“品牌化”的可能性,即用户需要能够为他们的帐户选择一个主题,然后将一种特定的颜色应用于应用程序的样式。
作为概念证明,我选择并设法实现的第一个选项是使用 Vuex 将所需样式作为 Vuex 对象存储在应用程序商店中,然后我将其用于绑定到需要应用的元素的样式到。用于选择颜色的颜色选择器会触发状态突变以更改颜色。这工作得很好,甚至不太难使用,因为它允许只在需要应用的 html 元素上使用类似 :style ="$store.state.brand" 的表达式。当我更改颜色时,它会在所有组件上更新。此选项有其优点,因为它非常简单,并且还允许用户从颜色选择器中选择他/她想要的任何颜色。但是,它在设计方面有其局限性,因为这种方式无法实现复杂的样式(例如
所以我想尝试并向我们的客户建议的第二个选项是拥有一组用户可以选择的预定义主题。这些主题将在 css 文件中定义(使用 sass/less 或类似的东西)。我现在需要实施的是以下内容:
当用户选择一个主题时,比如说从下拉列表中,我想从适当的 css 文件加载应用程序的样式并重新加载应用程序以反映这些更改。在 Vue 中执行此操作的最有效和最佳实践方法是什么?