Vuex

https://vuex.vuejs.org/zh/

一、Vue是什么？

  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1.1、什么是 "状态管理模式"？

  状态管理模式是一种在前端开发中管理应用状态的方法。在大型应用中，状态管理通常是一个复杂的问题，因为许多组件可能需要共享同一状态，或者需要在不同组件之间传递状态。为了解决这些问题，我们可以采用状态管理模式。

  Vuex 是一个专为 Vue.js 设计的状态管理模式和库。它提供了一种集中式存储管理应用程序中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。这使得我们能够直接在组件之间共享状态，而不必通过繁琐的 prop 传递或者事件广播。

  Vuex 基于 Flux 和 Redux，但它更简洁，更易于集成到 Vue.js 中。Vuex 利用 Vue.js 的细粒度数据响应性，使得状态更新更加高效。在 Vuex 中，我们有一个全局的 state 对象，用于存储整个应用的状态。我们可以通过 mutations 修改状态，mutations 是一个同步事务，用于修改 state。我们还有一个 actions 概念，它是一个可以包含任意异步操作的方法，可以通过提交 mutation 修改状态。

  Vuex 提供了模块化的概念，让我们能够将 Vuex Store 分割成模块（modules）。每个模块拥有自己的 state、mutation、action、getter，甚至可以嵌套子模块——从上至下进行同样方式的分割。这种方式可以让我们的状态管理更加清晰，更加易于维护。

1.2、什么情况下使用 Vuex?

  Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

  如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用Vuex。一个简单的store模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道什么时候需要它。

二、安装

https://vuex.vuejs.org/zh/installation.html

2.1、直接下载/CDN引用

https://unpkg.com/vuex@4

Unpkg.com 提供了基于 npm 的 CDN 链接。以上的链接会一直指向 npm 上发布的最新版本。您也可以通过 https://unpkg.com/[email protected]/dist/vuex.global.js 这样的方式指定特定的版本。

在 Vue 之后引入 vuex 会进行自动安装：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

2.2、npm

npm install vuex@next --save

2.3、yarn

yarn add vuex@next --save

2.4、自己构建

如果需要使用 dev 分支下的最新版本，您可以直接从 GitHub 上克隆代码并自己构建。

git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
yarn
yarn build