一、定义
概念: 专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
官网地址: https://vuex.vuejs.org/zh/
二、使用时机
-
多个组件依赖于同一状态
-
来自不同组件的行为需要变更同一状态
三、搭建vuex环境
四、基本使用
五、getter的使用
(1) 概念: 当state中的数据需要经过加工后再使用时,可以使用getters加工类似于dada-\>computed state-\>getters
(2) 在store中追加getters配置
javascript
const getters= {
xxx(state){
return state.sum * 10;
}
}(3) 组件中读取数据: $store.getters.xxx
六、四个map方法的使用
(1) mapState: 用于帮助我们映射state中的数据为计算属性
javascript
computed: {
// 借助mapState生成计算属性-对象写法
...mapState({sum:'sum', school: 'school', subject: 'subject'})
// 借助mapState生成计算属性=数组写法
...mapState(['sum', 'school', 'subject'])
}(2) mapGetters: 用于帮助我们映射getters中的数据为计算属性
javascript
computed: {
// 借助mapGetters生成计算属性-对象写法
...mapGetters({bigSum:"bigSum"})
// 借助mapGetters生成计算属性-数组写法
...mapGetters(['bigSum'])
}
(3) mapActions: 用于帮助我们生成与actions对话的方法,即包含$store.dispatch(xxx)的函数
javascript
methods: {
// 借助mapActions生成-对象形式
...mapActions({increment: 'jiaOdd', incrementWait: 'jiaWait'})
// 借助mapActions生成-数组形式
...mapActions(['jiaOdd', 'jiaWait'])
}
(4) mapMutations: 用于帮助我们生成与mutation对话的方法.即包含$store.commit(xxx)的函数
javascript
methods: {
// 借助mapMutations生成-对象形式
...mapMutations({increment: 'JIA', decrement: 'JIAN'})
// 借助mapMutations生成-数组形式
...mapMutations(['JIA', 'JIAN'])
}
备注: mapActions与mapMutations使用时,若需要传递参数需要,则在模板中绑定事件时传递参数,否则参数是事件对象
七、模块化+命名空间
