vuex (快速理解)

581 阅读1分钟

Vuex 是什么

  • Vuex 是 vue 项目中实现大范围数据共享的技术方案
  • 作用:能够方便、高效地实现组件之间的数据共享

使用 Vuex 的好处

  1. 数据的存取一步到位,不需层层传递
  2. 数据的流动非常清晰
  3. 存储在 Vuex 中的数据都是响应式的

State

State本质上就是Object对象
作用:用来存储全局共享的数据

image.png

组件访问 State 数据的第一种方式
在每个 Vue 组件中,可以通过this.$store.state.全局数据名称访问 Store 中的数据

组件访问 State 数据的第二种方式
基于 Vuex 提供的mapState辅助函数,可以方便的把 Store 中指定的数据,映射为当前组件的计算属性

image.png

Mutation

Mutation本质上是 JavaScript函数,专门用来变更 Store 中的数据

Mutation 的使用步骤

  • 在 Vuex 中定义 Mutation 方法
  • 在组件中调用 Mutation 方法
  • mutation 方法的第一个形参永远都是 state 对象
  • 在组件中使用this.$store.commit('方法名')调用mutation 方法

载荷(Payload)

Vuex 中的载荷就是参数的意思,通过载荷可以提高 Mutation 方法的通用性

提交载荷(Payload) 在组件中,可以通过 this.$store.commit() 方法的第二个参数来提交载荷(参数)

mapMutations辅助函数 基于 Vuex 提供的mapMutations辅助函数,可以方便的把 Store 中指定的方法,映射为当前组件的

Action

  • Action本质上是 JavaScript函数,专门用来处理 Vuex 中的异步操作。
  • Mutation 中不建议执行异步操作
  • Action不能直接修改数据源
  • Action 异步操作得到的数据结果转交给 Mutation,由Mutation 负责修改数据源
  • 在 Action 方法中,可以通过第二个形参的位置来定义载荷参数 通过 this.$store.dispatch() 方法的第二个参数,即可提交载荷

mapActions辅助函数 基于 Vuex 提供的mapActions辅助函数,可以方便的把 Store 中指定的 Action,映射为当前组件的 methods

Getter

  • Getter本质上是 JavaScript函数
  • 它是Vuex 中的计算属性,当 Store 数据源发生变化时,Getter 的返回值会自动更新 访问 getter 方式: 基于mapGetters辅助函数,可以把 store 中的 getter 映射为当前组件的计算属性

Module

  • Vuex 中的 Module 表示按照模块化的开发思想,把不同的数据和方法,按照彼此的关联关系进行封装
  • 每个模块都是彼此独立的,都可以拥有自己的 state、mutations、actions、getters 节点
  • 模块的 state 是方法
  • 使用 modules 对象注册模块
  • 模块的注册名称:导入的模块对象 namespaced (命名空间)可以解决不同模块之间成员名称冲突的问题

image.png