vue.js如何组织前端数据(例如产品信息)

时间:2018-06-09 05:28:09

标签: vue.js vuejs2 vue-component

要存储的正确模式是什么,例如vue2单页面应用程序中的静态产品信息数据?

之前我使用过外部js文件,其中包含一个带产品属性的JSON(例如名称,重量,身高等)。

我不想通过AJAX加载,因为spa需要在没有Web服务器的情况下工作。

1 个答案:

答案 0 :(得分:1)

虽然VueX旨在为整个单页面应用程序中的动态数据提供单一的事实来源,但我认为这也是存储静态数据的正确而简洁的方法。 VueX允许你编写getter和setter(作为突变/动作),现在如果你只是将那些setter从模块中删除,你将拥有一个只读的集中存储模块,但在每个组件中都可用。

为什么这比仅使用静态JSON文件更好?

使用JSON文件会将整个内容公开给使用该文件的每个组件。在某些情况下,这可能是你想要的,但它远没有像多个getter一样灵活,它允许你定义每个组件应该接收的确切范围。此外,VueX使用Vue本身的所有可观察模式和最佳实践,因此将数据集成到例如计算属性中非常容易。由于getter模式,您还可以在一个可以在整个应用程序中共享的地方定义任何类型的过滤或排序。虽然这可能不是您现在所需要的,但请记住,您的要求可能会随着时间的推移而发生变化,只需稍后选择轻松实现,这也是一件好事。从端点读取数据而不是静态地获取数据也是如此。您的应用程序现在可能不需要它,但是如果您希望将来再进行某些操作,vuex将使您可以非常轻松地转换为动态数据,而无需更改任何组件。

什么反对VueX?

没那么多。虽然如果你真的只是将它用于静态数据,这只是一点点开销,但它为你提供的可能的可扩展性值得一点点下降。