1.  
  2. 主页
  3.  / 
  4. Vue教程
  5.  / 
  6. Vue教程之Vuex 详解

Vue教程之Vuex 详解

Vuex 是什么?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

简单来说 : vuex 是 Vue 配套的 公共数据管理工具,它可以把一些共享的数据,保存到 vuex 中,方便 整个程序中的任何组件直接获取或修改我们的公共数据。

使用场景

整个项目开发过程中,你一定遇到过多个状态,在多个界面间的共享问题,比如用户的登录状态、用户名称、头像、地理位置信息等等。比如商品的收藏、购物车中的物品等等。这些状态信息,我们都可以放在统一的地方,对它进行保存和管理,而且它们还是响应式的。

单组件的状态管理

  • State:不用多说,就是我们的状态。(姑且当做是data中的属性)
  • View:视图层,可以针对State的变化,显示不同的信息。
  • Actions:这里的Actions主要是用户的各种操作:点击、输入等,会导致状态的改变
Vue教程之Vuex 详解

多组件的状态管理

我们现在要做的就是将共享的状态抽取出来,交给我们的 Vuex,统一进行管理。

之后,每个视图,按照规定好的方式,进行访问和修改等操作。

这就是Vuex背后的基本思想。

Vue教程之Vuex 详解

Vuex 的核心概念

  • State 提供唯一的公共数据源,所有共享的数据都要统一放到 Store 的 State 中进行存储。
  • Mutation 用于变更 Store中 的数据。
  • Action 用于处理异步任务,触发Mutation的任务。
  • Getters 用于对 Store 中的数据进行加工处理形成新的数据。
  • Module 将store分割成模块,每个模块都有state、mutation、action、getter、甚至嵌套子模块

State

State 中写入数据

全局方式读取 State 中的数据

使用 Vuex 提供的 mapState 读取 State 中的数据

mutation

  • 只能通过 mutation 变更 Store 数据,不可以直接操作 Store 中的数据。
  • 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。

定义 mutation 方法

全局方式触发 mutations

使用 Vuex 提供的 mapMutations 触发 mutations

Action

用于处理异步任务。

如果通过异步操作变更数据,必须通过 Action,而不能使用 Mutation,但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。

定义 action 方法

全局方式触发 action

使用 Vuex 提供的 mapActions 触发 action

Getter

  • Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 的计算属性。
  • Store 中数据发生变化,Getter 的数据也会跟着变化。

定义 getter

全局方式获取 getter 数据

使用 Vuex 提供的 mapGetters 触发 action

module

将store分割成模块,每个模块都有state、mutation、action、getter、甚至嵌套子模块

总结

  • mutations中的函数第一个参数都是state,后面只能接收一个参数,如果要传递多个参数,可以使用对象来传递参数,使用时使用解构获取参数。
  • actions中接收参数context代表new出来的new Vuex.Store实例。
  • getters中接收参数state。
  • state相当于vue中的data,mutations相当于vue中的methods,actions是异步的methods,getters相当于vue中的computed属性 state,getters可以放到vue的计算属性里面 mutations,actions放在vue的methods中。

这篇文章对您有用吗? 3

我们要如何帮助您?

发表评论

邮箱地址不会被公开。 必填项已用*标注