【vuex】下载安装，理解和使用

vuex概念

Vuex 是专门为 Vue.js 设计的状态管理库。当多个视图依赖同一状态，组件之间多层嵌套，兄弟组件之间无法传值，不同视图的行为要求变更同一状态时，使用vuex作为状态的共享仓储，在项目中的任何组件下都可以访问。即用来存储公共资源比如token，用户信息等。

vuex安装和使用

1. npm i vuex -S 后安装vuex。

如果使用全局script标签引用Vuex时就不需要NPM下载和以下安装

2. vuex全局引用：

window.Promise会自动可用

//
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
window.Promise

3. vuex下载并引用：

vuex需要依赖promise：

npm install es6-promise --save  //在终端输入命令

import 'es6-promise/auto';//将引用添加到vuex之前  在vue项目的main.js文件中引用
import Vuex from 'vuex'

• 当一个组件需要获取多个状态的时候，状态都放在计算属性会重复冗余，可以使用mapState辅助函数来帮助生成计算属性

import {
    mapState } from 'vuex'   //在main.js文件中引用

4. 注册 ：

Vue.use(Vuex)   //在main.js文件中

vuex应用–一个store实例的理解

• 创建一个全局的store仓储：每个应用/项目只有一个store实例，包含了全部的应用层级状态，叫做单一状态树

1.1 state:存储数据

1.2 mutations： this.$store.commit('方法名')

• mutations被分成两部分： type和payload。type指mutations内的函数名。payload叫做mutatiosn的载荷，是obj类型；
• 用来修改state中的数据。修改state中的数据，使用mutations是唯一的方式。
• 最好只用来处理同步操作。【主要原因：同步操作使用插件devtools可以帮助我们捕捉mutations快照。如果是异步操作，devtools不能很好的追踪】
• mutations携带参数：mutations内的方法最多支持两个参数，function(state,obj)。
• Vue.set() Vue.delete() 响应式的修改或者删除state中的数据
• mutations的提交风格：

//mutations普通的提交封装，带参数： this.$store.commit('方法名',params) 

//mutations内的函数的特殊提交封装：
//this.$store.commit(
//	type:'方法名',
//	params--参数是obj类型，叫做mutatiosn的载荷，payload
//)
this.$store.commit(
	type:'add',
	{
   
		c:3,
		d:1
	}
)

• mutations的类型常量： 不是很理解，占个坑

1.3 actions：

• mutations最好只处理同步操作。当需要进行异步操作时，先使用actions，再使用mutations来修改数据；
• actions通常用来处理异步操作；
• 通过dispatch访问actions内的函数。$store.dispatch('function')
• actions可以携带最多两个参数： context/ context,payload 。根下的actions内的函数的context相当于store对象。context称作上下文
• 在actions中如何调用mutations中的函数：context.commit('function')

所以dispatch和commit的区别：dispatch调用异步操作，commit调用同步操作。

1.4 getters： $store.getters.function

• getters可缓存。
• 对state中的原数据进行包装，处理，并提供处理后的数据给调用者。
• getters不会修改state中的原数据。
• 如果state中的数据发生变化了，处理原数据的相应的getters中的函数就会自动重新求值

1.5 modules:

• 因为vuex是单一状态数，只能有一个store实例，数据存储在state中。如果所有数据都放在state会太多了不优雅。这时候就需要用到modules。
• modules可以对数据进行模块化划分。
• 要引用moduleA内的state中的变量时：$store.state.a.name
• 访问模块内的mutations：同访问根下的mutations的方式一样。直接$store.commit(‘function’)。vuex会先去查找根下的mutations，找不到就会去招模块内的mutations，直到找到为止。访问模块内的getters也同理。 $store.getters.function
• 根下的方法只允许最多有两个参数。state / state,payload[obj]。而在模块内允许有最多三个参数：state / state,getters / state,mutations / state,actions / state,getters,rootState
• 通过第三个参数rootState可以访问根下的state
• 在modules内的参数还存在rootGetters,rootMutations,rootActions

modules:{
   
//基础用法：
	//a:{
   
	//	state: {},
	//	mutations:{},
	//	actions:{},
	//	getters:{}
	//},
	//b:{
   
	//	state: {},
	//	mutations:{},
	//	actions:{},
	//	getters:{}
	//}
//进阶用法：
	cons moduleA = {
   
		state: {
   name:'小米'},
		mutations:{
   },
		actions:{
   },
		getters:{
   
			// 1 模块内的方法携带一个参数
			fullname(state) {
   
				return state.name + 'name后缀'
			},
			// 2 模块内的方法携带2个参数
			fullname2(state,getters) {
   //state,mutations / state,actions
				return getters.fullname + 'name后缀222'
			},
			// 3 模块内的方法携带3个参数
			fullname3(state,getters,rootState) {
   
				return getters.fullname2 + 'name后缀333' + rootState