Vue3 _ 25. Vue 状态管理 - Vuex 4

一、什么是 Vuex

打开官网：https://next.vuex.vuejs.org/zh/index.html

Vuex 是一个可以集中式存储状态的一个库，我们可以在库中定义一些全局参数，提供给项目的所有组件去使用。

二、状态管理模式

我们来看看什么是状态管理模式，直接看官网给的一个简单例子。

可以看到，这个其实非常简单，当我们触发 increment 方法的时候，界面上的 count 就会做一次自加。

在这个过程中包含了三个东西：

• 状态，驱动应用的数据源；
• 视图，以声明方式将状态映射到视图；
• 操作，响应在视图上的用户输入导致的状态变化。

这个操作我们可以进行一次抽象，来看一下官网给我们提供的图

首先是 state，这里是驱动应用的数据源，然后渲染到了 view，接着进行一次操作，触发 actions，改变了 state，接着从新进行渲染，以此往复......

但是，这个是在同一个 Vue 中，如果我们应用遇到多个组件共享同一个状态时，这种单向数据流就很容易被破坏。（主要是多个组件同时依赖，并且还要更改同一个状态的问题）

为了解决这个问题，Vue 将不同组件的共享状态抽取出来，以一个全局单例模式管理。而 Vuex 就是专门为 Vue.js 设计的状态管理库。

三、Vuex 流程图

首先是 Vue Components 通过调用 actions 中的方法，这个 actions 中的方法是可以改变 state 的方法；然后 actions 方法被调用后，再去使用 commit 提交到 mutations，最后 mutations 中也会存在方法，方法里就是改变 state 值，最后被改变的值通过数据绑定回显到 Vue 组件。

四、使用 Vuex

引入

使用这个 Vuex 之前，我们同样，需要进行安装，但是，我们其实在创建项目的时候已经将这个 Vuex 引入进来了。

如果当时我们没有使用 vuex，那么我们需要使用命令进行引入

npm install vuex@next --save

配置

我们打开 main.js

同样，这里我们先把 store import 进来。store（仓库） 是 vuex 应用的核心，所以这里我们是直接引入的 store。

使用

打开 store/index.js

 这里其实是系统已经给我们配置好的。

我们首先在 state 中定义一个 count 值

接着，我们需要在 mutations 中定义一个方法，这个方法就是将 count 进行自加的

但是这里要记得将我们上面定义的 state 传递进来，不然我们是没有办法直接通过 this 拿到 count 的。

剩下一个就是 actions，这里我们要做的操作是 commit，同样，我们需要定义一个方法，是为了供给其他的 component 进行调用。

这里我们是需要传递一个 context 对象，我们可以通过这个对象去执行 commit 操作。这里要说的是，context 不是 store，而是 store 的一个代理。

最后我们弄一个页面 VuexTest.vue

我们已经将 vuex 进行全局注册了，所以我们可以通过 $store 直接获取到对象。还有就是 add 中调用的 increment 方法，这个是调用的 actions 中的。

测试

可以看到，是可以的啊。

五、getters

这个其实也是 vuex 中带给我们的一个东西，它可以获取当前 vuex 中存储的对象。

我们这里来获取一下 count 的两倍。

保存运行一下~~~

可以看到哈，是可以的。

当然，Vuex 我们也只是学了一个皮毛，想要更深入的了解，需要翻看官方的文档。

这一篇东西不是很多，自己动手练习一下~~

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~