Vuex 是什么
- Vuex 是 vue 项目中实现大范围数据共享的技术方案
- 作用:能够方便、高效地实现组件之间的数据共享
使用 Vuex 的好处
- 数据的存取一步到位,不需层层传递
- 数据的流动非常清晰
- 存储在 Vuex 中的数据都是响应式的
State
State本质上就是Object对象
作用:用来存储全局共享的数据
组件访问 State 数据的第一种方式
在每个 Vue 组件中,可以通过this.$store.state.全局数据名称访问 Store 中的数据
组件访问 State 数据的第二种方式
基于 Vuex 提供的mapState辅助函数,可以方便的把 Store 中指定的数据,映射为当前组件的计算属性
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 (命名空间)可以解决不同模块之间成员名称冲突的问题