为什么我们需要 mutations、setters 和 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

一旦你有了更大的应用程序，这些应用程序将与其他组件、store 中的状态等进行通信，你会很高兴你确实付出了努力来创建 getters 和二传手。

如果您创建一个小型、简单的 PWA 项目，或者您只是在胡闹，那么，是的，它可能看起来很混乱而且不需要。但是一旦那个小项目变得更加依赖于组件，这些组件依赖于来自 Vuex 的状态（考虑使用 Vuex，你不需要它，但你会知道什么时候需要它）。

一旦您确实创建了 getter 和 setter，并且您将在整个应用程序中使用这种模式，代码将是干净的，对于希望帮助您维护项目的每个程序员来说都易于阅读。

玩得开心 Vue。

Answer 2

首先引自Vuex doc：

When Should I Use It?

Although Vuex helps us deal with shared state management, it also comes with the cost of more concepts and boilerplate. It's a trade-off between short term and long term productivity.

If you've never built a large-scale SPA and jump right into Vuex, it may feel verbose and daunting. That's perfectly normal - if your app is simple, you will most likely be fine without Vuex. A simple store pattern may be all you need. But if you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better handle state outside of your Vue components, and Vuex will be the natural next step for you. There's a good quote from Dan Abramov, the author of Redux:

"Flux libraries are like glasses: you’ll know when you need them."

如果您的组件因为具有许多不同的状态并进行许多不同的状态突变而变得非常大，那么推理它们的代码并维护或扩展它们会变得越来越难。这是从组件本身解耦状态存储和修改变得有趣的时候。

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

此外，与后端通信的应用程序 API 将涉及异步 ajax 调用、错误处理等。如果所有这些都放在与组件相同的文件中，它将是又长又难读懂。

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

如您所见，这一切都是为了让您的应用程序具有更好的结构。所有这些原因在更大的应用程序中加在一起，使其更易于维护。

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

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

更新

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

一些有趣的读物：

Answer 3

如果您有面向对象编程的经验，您应该熟悉这种模式。这样您就可以集中依赖您的数据。

Getter：例如检查您的数据是否已初始化
突变：例如在将数据写入商店之前验证数据
操作：进行异步突变

当然你可以按照你提到的方式来做，但这不是一个干净的风格，可能无法扩展。

这里有一个名为 vuex pathify 的插件，可以让这一切变得更容易，但如果你不知道 vuex 是如何工作的，就很难理解。

为什么我们需要 mutations、setters 和 getter 来进行状态管理？

Why do we need mutations, setters and getter for state management?

javascript

state-management

vue.js

vuex

更新