5.VueX
5.1.简介
5.1.1.介绍
概念以及作用：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对 vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
使用场景：
- 多个组件依赖于同一状态
- 来自不同组件的行为需要变更同一状态
5.1.2.纯vue版的计数器
效果图
代码示例
5.1.3.Vuex工作原理
①原理图
②state
vuex管理的状态对象
它应该是唯一的
//代码示例
const state = {
xxx:initValue
}
③Actions
值为一个对象，包含多个响应用户动作的回调函数
通过commit( )来触发mutation中函数的调用, 间接更新state
如何触发actions中的回调： 在组件中使用$store.dispatch('对应的action回调方法名',数据)
可以包含异步代码（定时器，ajax等）
//代码示例
const actions = {
zzz({commit,state},data1){
commit('yyy',{data1})
}
}
④Mutations
值是一个对象，包含多个直接更新 state 的方法
在组件中使用$store.commit('对应的mutations回调方法名',数据)
在action中使用：action能调用mutations中的方法：commit(对应的mutations方法名)
mutations中方法的特点：不能写异步代码、只能单纯的操作state
//代码示例
const mutations = {
yyy(state,{data1}){
//更新state的某个属性
}
}
⑤getters
类似于一个全局的计算属性
值为一个对象，包含多个用于返回数据的函数
使用：$store.getters.mmm
//代码示例
const getters = {
mmm(state){
return state.msg + '!'
}
}
⑥modules
包含多个module，一个module是一个store的配置对象，与一个组件（包含有共享数据）对应
5.2.入门
5.2.1.搭建环境
安装
vuex3：`npm i vuex@3，匹配vue2安装
vuex4：`npm i vuex，匹配vue3
导入vuex：import vuex from 'vuex'
使用vuex：Vue.use(vuex)
代码示例
index.js
main.js
5.2.2.vuex版的计数器
效果图
代码示例
count
main.js
执行流程
mutations的方法名字最好大写，以便于区分
commit对接的是mutations
dispatch对接的是actions
5.3.四个map方法
四个方法中的
对象写法和数组写法的简写和使用方式都是差不多的
5.3.1.mapState
作用：用于映射state中的数据为计算属性
使用
- 对象写法：
...mapState({对象名1:'调用的对象名1',对象名2:'调用的对象名2'})- 这种写法没有简写方式
- 数组写法：
...mapState([对象名1:'调用的对象名1',对象名2:'调用的对象名2'])- 如果
对象名和调用的对象名是一致的，可以简写：...mapXXX(['对象名1',对象名2'])
- 如果
代码示例
黄色框的写法是将上面红色框中相同的部分（this.$store.state）提取出来，这个写法需要导入vuex提供的函数mapState
5.3.2.mapGetters
与上面
mapState函数使用一致，只是名字不同
作用：用于映射getters中的数据为计算属性
使用
- 对象写法：
...mapGetters({对象名1:'调用的对象名1',对象名2:'调用的对象名2'})- 这种写法没有简写方式
- 数组写法：
...mapGetters([对象名1:'调用的对象名1',对象名2:'调用的对象名2'])- 如果
对象名和调用的对象名是一致的，可以简写：...mapXXX(['对象名1',对象名2'])
- 如果
代码示例
将相同的代码（this.$store.getters）提取出来，这个写法需要导入vuex提供的函数mapGetters
5.3.3.mapMutations
与上面
mapState、mapGetters函数使用一致，只是名字不同
作用：用于帮助我们生成与mutations对话的方法
使用
- 对象写法：
...mapMutations({方法名1:'调用的方法名1',对象名2:'调用的方法名2'})- 这种写法没有简写方式
- 数组写法：
...mapMutations([方法名1:'调用的方法名1',对象名2:'调用的方法名2'])- 如果
对象名和调用的对象名是一致的，可以简写：...mapXXX(['方法名1',方法名2'])
- 如果
代码示例
将相同的代码（this.$store.commmit）提取出来，这个写法需要导入vuex提供的函数mapMutations
5.3.4.mapActions
与上面
mapState、mapGetters、mapMutations函数使用一致，只是名字不同
作用：用于帮助我们生成与actions对话的方法
使用
- 对象写法：
...mapActions({方法名1:'调用的方法名1',对象名2:'调用的方法名2'})- 这种写法没有简写方式
- 数组写法：
...mapActions([方法名1:'调用的方法名1',对象名2:'调用的方法名2'])- 如果
对象名和调用的对象名是一致的，可以简写：...mapXXX(['方法名1',方法名2'])
- 如果
代码示例
将相同的代码（this.$store.dispatch）提取出来，这个写法需要导入vuex提供的函数mapActions
注意：使用mapActions和mapMutations方法使用时，若需要传递参数需要: 在模板中定事件时传递好参数，否则参数是事件对象
5.3.5.加强版的计数器
效果图
代码示例
index.js
Count
5.4.模块化+命名空间
将每一个功能的
mutation、actions、state、getters方法进行模块化管理
使用
-
在
index.js文件中进行分类const xxx = { //命名空间 namespaced:true, mutation{}, actions{}, state{} } // 创建并且暴露store export default new Vuex.Store({ // 配置模块对象 modules:{ // 这里只需要配置对象名 xxx } }) -
在组件中使用
-
...mapXXX方式//在原本的方式前面添加一个模块名参数即可 ...mapXXX('模块化名字',['方法名1','方法名2']) -
普通写法
//这种写法的获取方式有点奇怪 方法名(){ return this.$store.getters['模块化名字/方法名']; }
-
代码示例
index.js
count
