28《Vue 入门教程》Vuex 简介、安装

Posted 2023-03-21

参考技术A

本小节我们会介绍数据管理工具 vuex 。包括什么是 Vuex、Vuex 的安装、以及如何创建和使用 Vuex 数据仓库。

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

让我们从一个简单的 Vue 计数应用开始：

实例演示

"运行案例" 可查看在线运行效果

这个状态自管理应用包含以下几个部分：

以下是一个表示 “单向数据流” 理念的简单示意：

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的 “视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

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

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

我们可以在官网 (vuex) 上直接下载 vuex 。 在 Vue 之后引入 vuex 会进行自动安装：

在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：

当使用全局 script 标签引用 Vuex 时，不需要以上安装过程。

每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

实例演示

"运行案例" 可查看在线运行效果

代码解释 在 JS 代码第 4-8 行，通过 new Vuex.Store (…) 创建数据仓库。 在 JS 代码第 12 行，我们可以通过 store.state.count 访问仓库中定义的数据。

本节，我们带大家学习了 vuex 的基本概念。主要知识点有以下几点：