VueX基础

什么是VueX

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

什么样的数据可以存储在vuex里面？

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

state

定义vue数据的地方

state: {
		cartNum: 10,
	},

在组件访问数据的数据

mutations

定义修改数据的方法

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

在组件中访问mutations的方法

$store.commit('SET_CART_NUM',100)

actions

定义异步和延迟的方法

actions: {
		getCartNum(context,data){
			setTimeout(()=>{
				context.commit("SET_CART_NUM",data);
			},4000)
		}
		
	},

注：

只能调用mutations 不能直接修改

在组件中调用：

$store.dispatch('getCartNum',45)

getters

getters: {

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

注：

从现有的数据计算新的数据
佣金会跟随cartNum变化而变化

在组件中调用

$store.getters.fee