随记 -- vue-store

vuex --状态管理器，状态就是数据，用来管理vue通用的数据（多组件共享的数据）。可以将数据集中化管理，共同维护一份数据，响应式变化，操作简单。vuex遵循单向数据流，组件中不能直接修改仓库的数据。

1、安装并下载
2、引入挂载
3、使用
1）state – 提供数据（要共享的数据）
使用 – 通过store直接访问
在模板中：{{ $store.state.xxx }}
在组件逻辑中：this.$store.state.xxx
在JS模块中：store.state.xxx
–通过辅助函数
mapState – 导入 import { mapState } from 'vuex'
– 数组方式引入 computed: { ...mapState(['xxx']) }
2）getters
在仓库中定义getters对象，类似于计算属性，派生出一些状态，比如对状态中的某个值相加。getters函数必须有返回值

				mutatiins: {
					// 第一个参数是state，额外参数只能有一个
					// 如果有多个参数，可包装成一个对象传递
					filterList(state) {
						return state.list.filter(item => item > 5)
					}
				}

在组件中提交调用
①方法一

				{{ $store.getters.filterList }}

②方法二

				// 引入
				import { mapGetters } from 'vuex'
				computed: {
					// 原生方法
					...mapGetters (['filterList '])
				}
				//  使用 {{ filterList }}

3）mutations --存放修改state的方法，修改是同步的
在仓库中定义mutations对象，对象中存放修改state的方法

				mutatiins: {
					// 第一个参数是state，额外参数只能有一个
					// 如果有多个参数，可包装成一个对象传递
					addCount (state, n) {
						...
					}
				}

在组件中提交调用
①方法一

				methods: {
					// 原生方法
					this.$store.commit('addCount', {xxx: xxx, xxxx: xxxx})
				}

②方法二

				// 引入
				import { mapMutation } from 'vuex'
				methods: {
					// 原生方法
					...mapMutations(['subCount'])
				}

4）actions – 处理异步操作
在仓库中定义actions对象，处理异步操作

				actions: {
					// 第一个参数是context（上下文），额外参数只能有一个
					// 如果有多个参数，可包装成一个对象传递
					// 一般用来发送请求，获取后台数据
					setAsyncCount (context, n) {
						setTimeout(() => {
							context.commit('方法名', n)
						, 1000}
					}
				}

在组件中提交调用
①方法一

				methods: {
					// 原生方法
					this.$store.dispatch('setAsyncCount ', n)
				}

②方法二

				// 引入
				import { mapActions } from 'vuex'
				methods: {
					// 原生方法
					...mapActions (['setAsyncCount '])
				}
				// 使用 this.setAsyncCount (n)

4、分模块 – 访问语法
使用state模块中的数据
1）直接通过模块名访问 $store.state.模块名.xxx
2)通过 mapState 映射
默认根模块的映射 mapState(['xxx'])
子模块的映射 mapState('模块名', ['xxx']) – 需要开启命名空间 namespaced: true
使用getters中的数据
1）直接通过模块名访问 $store.getters['模块名/xxx']
2）通过 mapGetters 映射
默认根级别的映射 mapGetters (['xxx'])
子模块的映射 mapGetters('模块名', ['xxx']) – 需要开启命名空间
使用mutations中的数据
1）直接通过模块名访问 $store.commit['模块名/xxx', 额外参数]
2）通过 mapMutations 映射
默认根级别的映射 mapMutations (['xxx'])
子模块的映射 mapMutations ('模块名‘, ['xxx']) – 需要开启命名空间
使用actions中的数据
1）直接通过模块名访问 $store.dispatch['模块名/xxx', 额外参数]
2）通过 mapActions 映射
默认根级别的映射 mapActions (['xxx'])
子模块的映射 mapActions ('模块名', ['xxx']) – 需要开启命名空间