1.Vuex
1.1 Vuex
是什么?
Vuex
是一个专为Vue
应用程序开发的状态管理模式。它采用集中式存储来管理应用中的所有组件的状态,简单来说,对Vue
应用中多个组件共享的状态进行集中式的管理。
状态(state
)就是组件中共享的数据。
应用状态的案例:
- 登录信息
- 社交应用的中的通知
- 电商应用中的购物车
每一个Vuex
应用的核心就是store
,store
就是一个容器,包含了应用中的所需要的状态。
创建store
实例之所以能够在各个组件中共享的原因是:
store
实例是一个全局单例模式,其提供了一种机制:将状态从根组件注入到每一个子组件中。所以在子组件中可以通过this.$store
访问
1.2 安装
npm install --save vuex
状态管理建议存储在
src/store
目录
Vuex
本质就是Vue
的插件
1.3 核心概念
• state
state
定义了应用的数据,其数据类型可以为string
、number
、boolean
、array
、object
• Getters
getters
的作用是用于获取state
中的数据信息,也就代表getters
依赖于state
Vuex
允许在store
中定义getters
(可以认为是store
的计算属性),getters
的返回值会根据它的依赖被缓存起来,只有当它的依赖值发生变化时才会被重新计算。其语法结构是:
getters:{
getNums(state){
...
}
}
getters
中将state
作为唯一参数进行传递,state
代表就是当前store
的数据,其会自动注入。
• Mutations
Mutations
是改变状态的的操作方法,也是Vuex
修改state
唯一的方法,其语法结构是:
mutations:{
函数名称(state[,payload]){
...
}
}
state
作为mutations
的第一个参数,而且Vuex
中的state
会自动注入
payload
译为提交载荷,也就是向store.commit
传入的额外参数,在多数情况下,载荷应该是一个对象。
调用mutations
时需要执行commit()
方法,其语法结构是:
store.commit("函数名称"[,参数)
• Actions
Actions
类似于Mutations
,不同于:
Actions
可以包含任意异步操作,但Mutations
不允许发生异步操作Actions
提交给Mutations
,而不是直接修改state
语法结构是:
actions:{
函数名称(context){
....
}
}
dispatch()
方法用于分发Action
,其语法结构是:
$store.dispatch('函数名称'[,payload])
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Do39bAYp-1587727233531)(E:\www\Material\WEBTN1912\14_VUEUI\Day06\note\assets\image-20200417175538264.png)]
2.再谈VUEX
– 辅助函数
• mapState
mapState()
函数用于为组件创建计算属性以返回Vuex Store
中的状态,其语法结构是:
import {mapState} from 'vuex'
computed:{
...mapState(array | object)
}
• mapGetters()
mapGetters()
函数用于为组件创建计算属性以返回getters
的返回值,其语法结构是:
import {mapState} from 'vuex'
computed:{
...mapGetters(array|object)
}
• mapMutations()
mapMutations()
函数用于创建组件方法以提交Mutation
,其语法结构是:
import {mapMutations} from 'vuex';
methods:{
...mapMutations(array | object)
}
• mapActions()
mapActions()
函数用于创建组件方法以分发Action
,其语法结构是:
import {mapActions} from 'vuex';
methods:{
...mapActions(array | object)
}