Vuex中五个属性的详细说明，大全

一.vuex-state单一状态树

• 如果状态信息保存到多个Store对象，那么后期的管理和维护会变得特别困难
• 所以Vuex使用了单一状态树来管理应用层级的全部状态，即一个项目中只有唯一一个store，用来存储所有的状态信息
• 单一状态树能够让我们更直接的方式找到某个片段的状态，方便维护和管理

二.getters的基本使用

1.getters可以视为计算属性，当数据需要变化后再传给其他组件时，可以使用getters，默认传入state参数

getters:{
	powerCounter(state){
		return state.counter * state.counter
	},
	more20stu(state){
		return state.students.filter(s => s.age > 20)
	}
}

在调用时，使用$store.getters.方法名，如$store.getters.powerCounter即可

2.getters传递参数
getters里面除了返回固定的值，还可以返回函数
getters中的某个函数如果想接收参数，需要用返回函数的方法

getters:{
	powerCounter(state){
		return state.counter * state.counter
	},
	more20stu(state){
		return state.students.filter(s => s.age > 20)
	},
	more20stuLength(state,getters){ 
		return getters.more20stu.length
	},
	moreAgeStu(state){ // 返回函数
		return function(age) {
			return state.student.filter(s => s.age > age)
		}
	}
}

三.vuex-mutation

vuex的store状态的唯一更新方式：提交mutation
mutation主要包括两部分：

• 字符串的事件类型
• 一个回调函数，该回调函数的第一个参数就是state

mutation传递参数
在通过mutation更新数据时，有可能我们希望携带一些额外的参数
参数被称为是mutation的载荷（payload）

组件中的代码
methods:{
	addCount(count){ // 传递单个参数
		this.$store.commit('incrementCount',count)
	},
	addStudent(){  // 传递多个参数
		const stu = {id:114,name:'alan'}
		this.$store.commit('addStudent',stu)
	}
}

mutation内的代码
mutation:{
	incrementCount(state,count){
		state.counter += count
	},
	addStudent(state,stu){
		state.students.push(stu)
	}
}

mutation的两种提交风格

• 普通的提交封装this.$store.commit('increment',count)，这种情况下count的类型为一个变量
• 特殊的提交封装,mutation中的处理方式是将整个commit的对象作为payload使用。

this.$store.commit({
	type:'increment',
	count
})

所以在mutation中，当利用特殊形式提交封装时,用payload载荷来接收

mutation:{
	incrementCount(state,payload){ // payload载荷
		state.count += payload.count
	}
}

四.vuex的数据响应式原理

一开始就被定义在store对象内部的state中的属性都会被加入到响应式系统中，而响应式系统会监听属性的变化，当属性发生变化时，会通知所有界面中用到该属性的地方，让界面发生刷新

反之，如果一开始属性并没有加在state中，而后面我们希望将它变成响应式的属性
比如我们想在一个对象中加入address属性，需要使用Vue.set添加，使用Vue.delete删除实现响应式

mutation:{
	updateInfo(state){
		Vue.set(state.Info,'address','洛杉矶') //此方法为响应式的，添加
		Vue.delete(state.Info,'age') //此方法为响应式的，删除
	}
}

而单纯的state.Info['address']='洛杉矶'是无法做到响应式的，即页面不会进行刷新、更改

五.mutation的常量类型

官方文档中不推荐我们将mutation中的方法名和组件中的方法名用以下方式来写，因为一旦我们出现书写错误，就无法完成回调。

而是建议在store文件夹下新建一个mutation-types.js文件，内部书写export const INCREMENT = 'increment'类似这种写法的导出

之后在mutation及组件内部想使用时，只需要

mutation方法中
mutaton:{
	[INCREMENT](state){
		state.count++
	}
}

组件内部
methods:{
	addition(){
		this.$store.commit(INCREMENT)
	}
}

六.actions的详细使用

• 通常情况下，Vuex要求我们的mutation中的方法必须是同步方法
• 如果使用异步操作，那么devtools将不能很好地追踪
• 如果确实有异步操作，要使用Action替代mutation完成

action的基本代码书写:action中的方法默认传入context参数，此时表示store对象

mutation:{
	updateInfo(){
		state.Info.name = 'lilei' // state里的状态只能在mutation中更改
	}
}
actions:{
	aupdateInfo(context，payload){ // 当传入参数时，需要payload
		// 此处举例用Promise包装了异步操作
		return new Promise((resolve,reject) => {
			setTimeOut(() => {
				context.commit('updateInfo') // mutation中的方法用commit回调
				console.log(payload) //打印‘我是携带的信息’
				resolve('11111')
			},1000)
		})
	}
}

组件内部：
methods:{
	updateInfo(){
	this.$store
	.dispatch('aupdateInfo','我是携带的信息') //actions中的方法用dispatch回调
	.then(res => { //promise返回的then在这里书写
		console.log(res) //打印11111
	})
	}
}

• mutation中的方法用commit回调
• actions中的方法用dispatch回调
• state里的状态只能在mutation中更改

六.modules的详细使用

• Vue使用单一状态树，那么也意味着很多状态都会交给Vuex来管理
• 当应用变得非常复杂时，store对象就会变得相当臃肿
• 为了解决这个问题，Vuex允许我们将store分割成多个模块（Module），而每个模块拥有自己的state、mutations、actions、getters等

const moduleA = {
	state:{
		name:'zhangsan'
	}
	mutations:{
		updateName(state,payload){
			state.name = payload
		}
	}
	actions:{
		aupdateName(context){ 
			context.commit('updateName','wangwu')
			//这里的commit回调的是当前模块里的mutations中的方法
		}
	}
	getters:{
		fullname(state){
			return state.name + '1111'
		},
		fullname3(state,getters,rootState)
	}
}

const store = new Vuex.store({
	state:{}
	mutations:{}
	getters:{}
	actions:{}
	modules:{
		a:moduleA
	}
})

组件内部
如果是想调用moduleA里面的state:$store.state.a.name
如果是想调用moduleA里面的getters:$store.getters.fullname
如果是想调用moduleA里面的mutations:$store.commit('updateName')
如果是想调用moduleA里面的actions:$store.dispatch('aupdateName')

• Modules里的getters方法中，可以传入三个参数：state、getters、rootState,rootState表示根store里的state

七.Vuex-store文件夹的目录结构

在store文件夹下，新建actions.js、getters.js、mutations.js文件以及modules文件夹，使得index.js中的代码更清晰，但是一般state不分离出来

在这些新建的文件中export default {} 导出即可