将所有动态数据打包到单个 Vuex 存储中答案

【问题标题】：Packing all dynamic data into a single Vuex store将所有动态数据打包到单个 Vuex 存储中
【发布时间】：2018-04-04 21:26:22
【问题描述】：

我正在开发一个 Web 应用程序，该应用程序由各种页面组成，这些页面依赖于 ajax 调用（通过 AXIOS）从服务器获取数据或将数据传回服务器。但是，从服务器获取的数据在会话的生命周期中有 99% 是完整的，这意味着它不会被更改（即仅在更新频率非常低的情况下向用户显示）。此外，这些数据只是纯文本，包括内容链接，格式为 JSON 对象。

我刚刚发现了 Vuex，我一直在考虑打包所有这些分散在不同组件中的 get Ajax 请求，并将它们集中在 Vuex Store 中，这样当应用程序加载时，所有需要的数据都将从中获取服务器，以便在会话的生命周期内不再需要与服务器进行通信以获取此类数据（同时仅通过链接获取图像、音频等内容）。

Vuex 适合这个目的吗？这是一个好主意吗（基于加速导航的概念）？

【问题讨论】：

Vuex 旨在管理复杂性，如果您几乎不打算更新数据，我不确定将其添加到您的应用程序中是否真的有意义
@Axnyff：恰恰相反，我不是试图勉强更新数据，而是试图通过 Vuex 以集中的方式提供数据。
使用 Vuex 集中数据后，您可以尝试将数据持久化到本地存储以避免 ajax 调用，看看这个npmjs.com/package/vuex-persist，这样您就可以将应用的当前状态保存到 localStorage跨度>
@TahaAzzabi：很有趣，谢谢 :)
在这里解释更多alligator.io/vuejs/vuex-persist-state

标签： vue.js vuejs2 vuex

【解决方案1】：

正如 cmets 中所述，Vuex 旨在管理复杂性，在您的情况下，您计划在开始时为您的应用获取 99% 的数据。因此，在客户端-服务器方面，您完全不需要它。保持数据结构化就足够了。

但是，您在 Vuex 中也有 mutation 的概念。这个想法是您只能使用突变来更新核心数据。通过这种方式，您可以免受不必要的更改，并且您可以更好地了解数据如何/以何种顺序更改。因此，如果您对数据有复杂的操作（从服务器和应用程序逻辑中获取），Vuex 将是一个不错的选择。

对于不同类型的应用，还有其他有趣的功能。请注意，这只是保持数据结构化的另一种趋势方式。还有另一种策略，但由于 Vuex 由 Vue 核心团队定期维护（而且它似乎也在未来），我会建议它。特别是，如果您的应用程序不断增长，您会越来越喜欢它。在阅读了Vuex 的核心概念（或者更好的 Vuex 背后的逻辑：FLUX）之后，您将对它有更好的了解。

【讨论】：