本文深入研究Vuex，一个Vue.js状态管理库。我们将介绍创建它是为了解决的问题、其背后的核心概念、如何设置它，当然，还将在每一步中使用代码示例。

Vuex是一个由Vue团队构建的状态管理库，用于管理Vue.js应用程序中的数据。它提供了一种集中管理跨应用程序使用的数据的方式，并允许轻松的读写操作。

为什么它?-Vuex

Vue提倡将视图分解为组件。这些组件是可重用的Vue实例，可以接受数据、方法等。数据是保存视图状态的地方，而方法是允许我们根据用户在视图上的交互操作该状态的地方。

当用户单击组件中的按钮时，将调用一个方法，该方法依次对所述状态执行操作，而所述状态则更新有关该更改的视图。

然而，有时多个组件需要共享一个状态，或者在一个组件中的状态被修改后，您需要父/子或兄弟组件执行后续操作。

根据第二个组件的位置，您可以决定使用或关键字直接访问第二个组件的数据或方法并执行上述操作。但是如果你必须为尽可能多的组件执行此操作呢？propsthis.$parent

随着项目越来越大，你会发现自己到处传递属性，并直接操作DOM来访问各种组件。

这种方法变得非常乏味，并且当你遇到错误时，也会使代码库难以维护或调试。这就是Vuex的光芒。它提供了一个全局作用域，您可以在其中放置将在各种组件之间共享的所有状态。

它还为我们的代码提供了更多的结构，使调试变得更容易，因为我们可以使用开发者工具来跟踪发生的错误，当然还提供了Vue带来的响应性。可以把它想象成JavaScript中的windows——每个组件都可以访问它

安装Vuex

npm install vuex --