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

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 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."

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

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

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

将所有突变提取到单独的 Vuex 模块中，可以轻松地对它们进行隔离测试，而无需实例化使用它们的实际 Vue 组件。然后，Vue 组件可以(大部分)纯粹与显示逻辑和对事件的 react 有关。

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

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

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

更新

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

一些有趣的读物:

• Should I Store This Data in Vuex – When Should I use Vuex?
• How to handle large amounts of state in vuex