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

一、什么是 Vuex

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

Vue3 _ 25. Vue 状态管理 - Vuex 4_第1张图片

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

二、状态管理模式

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

Vue3 _ 25. Vue 状态管理 - Vuex 4_第2张图片

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

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

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

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

Vue3 _ 25. Vue 状态管理 - Vuex 4_第3张图片

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

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

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

三、Vuex 流程图

Vue3 _ 25. Vue 状态管理 - Vuex 4_第4张图片

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

四、使用 Vuex

引入

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

Vue3 _ 25. Vue 状态管理 - Vuex 4_第5张图片

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

npm install vuex@next --save

配置

我们打开 main.js

Vue3 _ 25. Vue 状态管理 - Vuex 4_第6张图片

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

使用

打开 store/index.js

Vue3 _ 25. Vue 状态管理 - Vuex 4_第7张图片

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

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

Vue3 _ 25. Vue 状态管理 - Vuex 4_第8张图片

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

Vue3 _ 25. Vue 状态管理 - Vuex 4_第9张图片

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

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

Vue3 _ 25. Vue 状态管理 - Vuex 4_第10张图片

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

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

Vue3 _ 25. Vue 状态管理 - Vuex 4_第11张图片

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

测试

Vue3 _ 25. Vue 状态管理 - Vuex 4_第12张图片

可以看到,是可以的啊。

五、getters

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

Vue3 _ 25. Vue 状态管理 - Vuex 4_第13张图片

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

Vue3 _ 25. Vue 状态管理 - Vuex 4_第14张图片

保存运行一下~~~

Vue3 _ 25. Vue 状态管理 - Vuex 4_第15张图片

可以看到哈,是可以的。

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

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

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

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

你可能感兴趣的:(Vue3,vue,vue-cli4,Vuex,Vuex,4.0,vuex解读)