Question

我现在正在学习Vue.js中的状态管理，我不太明白为什么它需要变得如此复杂并与所有这些不同的方法（变异，获取器，设置器）相混淆。直接更改数据是否更简单？看起来不干净吗？

仅使用这样的普通代码有什么问题？我在这里想念什么？除了必须在每个组件中定义 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中的引号：

我什么时候应该使用它？

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

如果您从未构建过大型SPA并直接进入Vuex，它可能会变得冗长而令人生畏。这是完全正常的-如果您的应用程序很简单，那么没有Vuex，您很可能会满意。一个简单的存储模式可能就是您所需要的。但是，如果您要构建中型到大型的SPA，您很可能会遇到使您考虑如何更好地处理Vue组件外部状态的情况，而Vuex将是您自然的下一步。 Redux的作者Dan Abramov给出了很好的报价：

“助焊剂库就像眼镜：您会在需要时知道它们。”

当并且如果您的组件由于具有许多不同的状态并进行许多不同的状态突变而变得很大时，就越来越难以推理其代码并维护或扩展它们。在这种情况下，将状态存储和修改与组件本身脱钩变得有趣。

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

此外，与后端API进行通信的应用程序将涉及异步ajax调用，错误处理等。如果将所有这些内容与组件放置在同一文件中，则将变得非常漫长且难以阅读和理解。

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

如您所见，这全都在于为您的应用程序提供更好的结构。所有这些原因加在一个更大的应用程序中，使其更易于维护。

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

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

Answer 2

一旦您拥有更大的应用程序，可以与彼此之间的组件，商店的状态等进行通信，您会很高兴您为创建 getters 和 setters < / strong>。

如果您创建的项目很小，简单的PWA，或者您只是在搞乱，那么它看起来可能会令人困惑，不需要使用。但是一旦这个小项目变得越来越依赖于组件，而组件又依赖于 Vuex 中的状态（考虑使用Vuex，您就不需要它了，但是您会知道何时需要它）。

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

玩Vue。

Answer 3

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

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

当然，您可以按照您提到的方式进行操作，但这不是干净的样式，可能无法扩展。

这是一个名为vuex pathify的插件，可简化所有操作，但是如果您不知道vuex的工作原理，则很难理解。

为什么我们需要状态管理的突变，设定者和获取者？

3 个答案: