vuex基础

一、vueX是什么

• 在大型，特大型，vue项目中做数据统一管理的
• 在vueX中存储的数据，每个组件都可以引用
• vueX中的数据发生变化，引用该数据的组件会自动更新

二、什么样的 数据可以存储在vueX里面

• 如果一个数据，需要在多个组件重复使用，可以把数据存放在vueX的store中
• 用户数据，购物车数据

三、state介绍

1.定义vueX的数据地方

state:{
     cartNum:10
}

2.在组件访问数据的数据

$store.state.cartNum

四、mutations介绍

**1.定义修改数据的方法

mutations:{
SET_CART_NUM:function(state,data){
         state.cartNum=data
      }
}

2.在组件中访问mutations的方法

$stote.commit("SET_CART_NUM",100)

五、actions介绍

1.定义异步，延迟的方法

actions:{
	getCartNum(context,data){
		setTimeout(()=>{
			//可以调用mutations方法
			context.commit("SET_CART_NUM",data)
		},4000)
	}
}

2.在组件中调用

$store.dispatch("getCzrtNum",33)

六、getters介绍

1.从现有state数据计算出新的数据

getters:{
	fee:function(state){
		return state.cartNum*0.5;
	}
}

2.在组件中调用

$store.getters.fee