真的会用Vuex吗？state、Mutation、Getter、Action的使用方法。

Vuex是什么

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。

Vuex的好处是什么？

使用Vuex管理数据的好处：

• A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护
• B.能够高效的实现组件之间的数据共享，提高开发效率
• C.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

Vuex的基本使用

1.安装vuex依赖包
npm install vuex --save
2.导入vuex包
import Vuex from 'vuex'
Vue.use(Vuex)
3.创建store对象

const store = new Vuex.Store({
	//state 中存放的就是全局共享的数据
	state:{
		count:0
	}
})

4.将store对象挂载到vue实例中

new Vue({
	el:'#app',
	render:h=>(app),
	router,
	//将创建的共享数据对象，挂载到Vue实例中
	//所有的组件，就可以直接从store中获取全局的数据了
	store
})

Vuex的核心概念

• state
• Mutation
• Action
• Getter

state

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储

//创建store数据源，所有共享的数据都要统一放到Store的State中进行存储。
const store = new Vuex.Stote({
	state:{
		count:0
	}
})

组件中访问state的第一种方式

this.$store.state.全局数据名称 如：this.$store.state.count

组件中访问state的第二种方式

//1.从vuex中按需导入mapState函数
import { mapState } from 'vuex'

通过导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性。

//2.将全局数据，映射为当前组件的计算属性
computed:{
	...mapState(['count'])
}

...是对象展开符，mapState函数的返回值是一个对象，‘...’可以将返回值对象中的属性结构赋值到计算属性中。

Mutation

Mutation用于修改变更$store中的数据。不推荐在组件中使用 $store.state.数据来修改数据。

• 只能通过mutation变更Store数据，不可以直接操作Store中的数据。
• 通过mutation这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

//定义Mutation
const store = new Vuex.Store({
	state:{
		count:0
	},
	mutations:{
		add(state) {
			//变更状态
			state.count++;
		}
	}
})

组件中触发mutation的第一种方式

methods:{
	handle() {
		//触发mutation的第一种方式
		this.$store.commit('add');
	}
}

触发mutation时传递参数：

定义mutation：

const store = new Vuex.Store({
	state:{
		count:0
	},
	mutations:{
		addN(state,step) {
			//变更状态
			state.count+=step;
		}
	}
})

触发mutation：

methods:{
	handle() {
		//调用commit函数，触发mutation时携带参数
		//commit的作用就是调用某个mutation函数
		this.$store.commit('addN',3);
	}
}

组件中触发mutation的第二种方式

1.从vuex按需导入mapMutations函数
import {mapMutations} from 'vuex'
2.通过导入的mapMutations函数，将需要的mutation函数，映射为当前组件的methods方法：

// 将指定的mutation函数，映射为当前组件的methods函数
methods:{
	...mapMutations(['add','addN'])
}

@ckick可以直接绑定add函数。

第二种方式触发mutation时传递参数：
直接在调用时传参

methods:{
	...mapMutations(['add','addN']),
	hand2(){
		this.addN(3);
	}
}

Mutation中不能写异步的代码，异步任务要卸载Action中、

Action

在mutations中不能编写异步的代码，会导致vue调试器的显示出错。 在vuex中我们可以使用Action来执行异步操作。但是在Action中还是要通过触发Mutation的方式间接变更数据。

const store = new Vuex.Store({
	mutations:{
		add(state){
			state.count++
		}，
		addN(state,step){
			state+=step;
		},
		subcount(state){
          	state.count--;
      	},
      	subcountN(state,step){
        	state.count-=step;
      	}
	},
	actions:{
		//action不能直接修改state中的数据
		//必须通过context.commit()触发某个mutation才行
		addAsync(context){
			setTimeout(()=>{
				context.commit('add');
			},1000)
		},
		addNAsync(context,step){
			setTimeout(()=>{
				context.commit('addN',step);
			},1000)
		},
		subAsync(context){
          	setTimeout(()=>{
            	context.commit('subcount')
          	},1000)
      	},
      	subNAsync(context,step){
        	setTimeout(()=>{
            	context.commit('suncountN',step)
        	},1000)
      	}
	}
})

触发Action第一种方式

methods:{
	handle(){
		//dispatch作用是触发action
		this.$store.dispatch('addAsync');
	}
}

触发action时携带参数：

methods:{
	handle(){
		//dispatch作用是触发action
		this.$store.dispatch('addNAsync',7);
	}
}

触发Action第二种方式

1.从Vuex中按需导入mapActions函数
import {mapActions} from 'Vuex'
2.通过导入的mapActions函数，将需要的actions函数，映射为当前组件的methods方法。

methods:{
	...mapActions(['subAsync','subNAsync']),
	subAsync1(){
            this.subAsync();
    },
}

第二种方式触发Action时传递参数

methods:{
	...mapActions(['subAsync','subNAsync']),
	subNAsync1(){
            this.subNAsync(9);
    },
}

Getter

Getter用于对store中的数据进行加工处理形成新的数据。

• Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
• Store中数据发生变化，Getter的数据也会跟着变化。

//定义Getter
const store = new Vuex.Store({
	state:{
		count:0
	},
	getters:{
		showNum:state=>{
			return '当前最新的数量是【'+state.count+'】'
		}
	}
})

使用Getters的第一种方式

this.$store.getters.名称

使用Getters的第二种方式

import {mapGetters} from 'vuex'
computed:{
      ...mapGetters(['showNum'])
},