Vuex

1. Vuex是什么？
Vuex是实现组件全局状态(数据)管理的一种机制，可以方便地实现组件之间数据的共享。

2. 使用Vuex统一管理状态的好处
(1)能够在Vuex中管理共享的数据，易于开发和后期维护。
(2)能够高效地实现组件之间的数据共享，提高开发效率。
(3)存储在Vuex中的数据都是响应式的，能够实时保持数据与页面的同步。
3. 什么样的数据适合存储到Vuex中？
一般情况下，只有组件之间共享的数据，才有必要存储到Vuex中；对于组件中的私有数据，依旧存储在data中。
4. 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 => h(app),
		router,
		//将创建的共享数据对象，挂载到Vue实例中
		//所有的组件，就可以直接从store中获取全局的数据了
		store
	)}

5. Vuex的核心概念
（1）state
state提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。

	组件中访问State中数据的第一种方式：
	this.$store.state.全局数据名称；
	第二种方式
	从vuex中按需导入mapState函数  import {mapState} from 'vuex';
	通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性：
	computed:{
	...mapState(['全局数据名称'])
	}
	然后在组件中直接使用全局数据名称即可获得该数据。

（2）Mutation

Mutation用于变更store中的数据。 只能通过Mutation变更Store数据，不可以直接操作Store中的数据。 通过这种方式虽然操作稍微繁琐，但是可以集中监控所有数据的变化。只有Mutations中定义的函数才有权利修改state中的数据。

const store = new Vuex({
	state:{
		count:0
		}，
	mutations:{
		add(state){
		state.count++;
		}
	}
})

在组件中使用mutations:
methods:{
	handle(){
		//触发mutations的第一种方式
		//commit 作用就是调用某个mutations函数
		this.$store.commit('add');
		}
	}
可以在触发mutations时传递参数：
const store = new Vuex({
	state:{
		count:0
		}，
	mutations:{
		addN(state,step){
		state.count+= step;
		}
	}
})

在组件中使用mutations:
methods:{
	handle2(){
		//触发mutations时携带参数
		this.$store.commit('addN',3);
		}
	}

触发mutations的第二种方式：
从vuex中按需导入mapMutations 函数
import {mapMutations} from 'vuex'
通过导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法：
methods:{
 ...mapMutations(['add','addN'])；
 	handle(){
 	this.add();//this直接调用函数
 	}
 }  
 

(3)Action
Action用于处理异步任务，不能在mutation内直接处理异步，但是在Action中还是要通过触发Mutation的方式间接变更数据。

const store = new Vuex({
	state:{
		count:0
		}，
	mutations:{
		add(state){
		state.count++;
		}
	},
	actions:{
		addAsync(context){
			setTimeout(()=>{
				context.commit('add');
			},1000);
		}
	}
})

组件中使用Actions
methods:{
	handle(){
		//触发actions的第一种方式 dispatch方法
		this.$store.dispatch('addAsync');
		}
	}

触发actions异步任务时携带参数：
const store = new Vuex({
	state:{
		count:0
		}，
	mutations:{
		addN(state,step){
		state.count+= step;
		}
	},
	actions:{
		addNAsync(context,step){
			setTimeout(()=>{
				context.commit('add',step);
			},1000);
		}
	}
})

组件中使用Actions
methods:{
	handle(){
		//触发actions的第一种方式 dispatch方法
		this.$store.dispatch('addNAsync',5);
		}
	}

触发Actions的第二种方式：

从vuex中按需导入mapActions函数
import {mapActions} from 'vuex'
通过导入的mapActions函数，将需要的actions函数，映射为当前组件的methods方法：
methods:{
...mapActions(['addAsync','addNAsync']);
}
然后可以直接在按钮点击的回调函数上直接绑定addAsync:
<button @click="addAsync">点击</button>
<button @click="addNAsync(3)">点击</button>

（4）Getter
Getter用于对store中的数据进行加工处理形成新的数据，类似Vue的计算属性，不会对store的源数据做修改。
Store中的数据发生变化。Getter的数据也会跟着变化。
定义getter:

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

使用getter的第一种方式：
this.$store.getters.名称；
使用getter的第二种方式：
import {mapGetters} from 'vuex'

computed:{
 ...mapGetters(['showNum']);
 }