为什么我们需要用于状态管理的 mutations、setter 和 getter？

Question

我刚刚在 Vue.js 中学习状态管理，我不太明白为什么它需要如此复杂和混淆所有这些不同的方法（突变、getter、setter）。直接改数据不是更简单吗？看起来是不是更干净了？

像这样使用纯代码有什么问题？我在这里缺少什么？除了我必须在每个组件中定义store: window.store。这样做对我来说是否安全，或者我是否非常有必要使用 Vuex？

// global app data
window.store = {
    appName: 'Hello World!'
}

export default {
    template: `
        <div @click="changeAppName">Hellow {{ store.AppName }}</div>
    `,

    data()
    {
        return {
            store: window.store
        }
    }

    methods: {
        changeAppName() {
            store.appName = 'Reactive app name!'
        }
    }
};

Answer 1

首先引用Vuex 文档：

我应该什么时候使用它？

虽然 Vuex 帮助我们处理共享状态管理，但它也带来了更多概念和样板的成本。这是短期和长期生产力之间的权衡。

如果您从未构建过大型 SPA 并直接跳入 Vuex，那可能会感到冗长和令人生畏。这是完全正常的 - 如果您的应用程序很简单，那么您很可能没有 Vuex 也可以。一个简单的商店模式可能就是你所需要的。但是如果你正在构建一个中到大型的 SPA，你很可能会遇到一些情况，让你考虑如何更好地处理 Vue 组件之外的状态，而 Vuex 将是你的下一步。Redux 的作者 Dan Abramov 引用了一句很好的话：

“Flux 库就像眼镜：你会知道什么时候需要它们。”

当你的组件因为有很多不同的状态并且做了很多不同的状态变化而变得非常大时，推理它们的代码并维护或扩展它们变得越来越难。这就是从组件本身分离状态存储和修改变得有趣的时候。

还要考虑多个组件可以触发相同操作或突变的情况。在这种情况下，很明显后者应该被提取到一个公共对象/类/文件中，以避免重复逻辑。一旦你到达那个点，你就已经非常接近一个类似 Vuex 的结构了。

此外，与后端 API 通信的应用程序将涉及异步 ajax 调用、错误处理等。如果所有这些都与组件放在同一个文件中，将会很长，而且很难阅读和理解。

将所有更改提取到单独的 Vuex 模块中，可以轻松地进行单独测试，而无需实例化使用它们的实际 Vue 组件。然后，Vue 组件可以（大部分）纯粹是关于显示逻辑和对事件的反应。

如您所见，这一切都是为了为您的应用程序提供更好的结构。所有这些原因在一个更大的应用程序中加起来，使它更容易维护。

最后，Vuex 确实通过 Vue.js devtools 插件添加了一些不错的功能，例如状态跟踪和回滚。这允许在应用程序执行的任何时候检查状态，并有助于了解对它所做的所有修改。请参阅下面的屏幕截图。

简而言之，要回答您的问题：不，Vuex 不是必需的，应该在有意义的时候使用它，因为在某些情况下它会带来更多不合理的冗长。

更新

自从我写这篇文章以来，我实际上已经缩减了我在 VueX 中存储的状态量。我仍然使用它，但不适用于所有州。我直接在“页面”父组件中保持状态不会比给定的“页面”（或路由）存活时间更长，并通过属性传递它。由于该状态会被拥有它的组件自动删除，这使我无需处理存储中的陈旧条目，并减少了应用程序中长时间会话的总内存使用量。

一些有趣的读物：

• 我应该在 Vuex 中存储这些数据——我应该什么时候使用 Vuex？
• vuex如何处理大量状态