vuex

1. 如果想要在子组件中使用祖先组件中的数据，那么就必须一层一层的传递
2. 兄弟组件之间不能直接传递数据，如果兄弟组件之间想要传递数据，那么就必须借助父组件

解决方案：使用vuex

什么是vuex?

vuex 是 vue配套的 公共数据管理工具，我们可以将共享的数据保存到vuex中，方便整个程序中的任何组件都可以获取和修改vuex中保存的公共数据。
把需要多个组件共享的变量全部存储在一个对象里面，将这个对象放在顶层的Vue实例中，让其他组件可以使用。

有什么状态是需要我们在多个组件间共享的呢？
比如用户的登录状态、用户名称、头像、地理位置信息等等。
比如商品的收藏、购物车中的物品等等。
这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的。

单页面的状态管理

State：不用多说，就是我们的状态。（可以当做就是data中的属性）
View：视图层，可以针对State的变化，显示不同的信息。
Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变。

多页面状态管理

多个页面都依赖同一个状态（一个状态改了，多个界面需要进行更新）
不同界面的Actions都想修改同一个状态（Home.vue需要修改，Profile.vue也需要修改这个状态）。

Vuex背后的基本思想
我们现在要做的就是将共享的状态抽取出来，交给我们的大管家，统一进行管理。
之后，每个页面，按照规定好的规定，进行访问和修改等操作。

Mutations 同步操作，发送网络请求
Actions 异步操作

使用步骤

1.提取出一个公共的store对象，用于保存在多个组件中共享的状态
2.将store对象放置在new Vue对象中，这样可以保证在所有的组件中都可以使用到
3.在其他组件中使用store对象中保存的状态即可
通过this.$store.state.属性的方式来访问状态
通过this.$store.commit('mutation中方法')来修改状态
注意事项：
我们通过提交mutation的方式，而非直接改变store.state.属性。
这是因为Vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.属性的值。

vuex核心概念

• State
• Getters
• Mutation
• Action
• Module

State单一状态树

如果你的状态信息是保存到多个Store对象中的，那么之后的管理和维护等等都会变得特别困难。
所以Vuex也使用了单一状态树来管理应用层级的全部状态。
单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。

Getters

需要从store中获取一些state变化后的状态。

Getters基本使用

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

Getters作为参数

getters:{
	more20stuLength(state,getters){
		return getters.more20stu.length;
	}
}

Getters传递参数

getters默认是不能传递参数的, 如果希望传递参数, 那么只能让getters本身返回另一个函数。

moreAgeStu(state){
	return function(age){
		return state.students.filter(s => s.age>age);
	}
}

Mutation

Vuex的store状态的更新唯一方式：提交Mutation。
Mutation主要包括两部分：
1.字符串的事件类型（type）
2.一个回调函数（handler）,该回调函数的第一个参数就是state。

Mutation基本使用

mutations:{
	increment(state){	
		state.counter++;
	}
}

methods:{
	add(){
		this.$store.commit('increment');
	}
}

Mutation传递参数

通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数，
参数被称为是mutation的载荷(Payload)

mutations:{
	incrementCount(state,count){	
		state.counter += count;
	}
}

methods:{
	addFive(count){
		this.$store.commit('increment',count);
	}
}

Mutation传递多个参数

以对象的形式传递, 也就是payload是一个对象。

mutations:{
	incrementCount(state,payload){	
		state.counter += payload.count;
	}
}

methods:{
	addFive(){
		this.$store.commit('incrementCount',{count:5});
	}
}

Mutation响应规则

Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新。
我们必须遵守一些Vuex对应的规则:
提前在store中初始化好所需的属性。
当给state中的对象添加新属性时, 使用下面的方式:
方式一: 使用Vue.set(obj, ‘newProp’, 123)；
方式二: 用新对象给旧对象重新赋值；

Action

context是什么?
context是和store对象具有相同方法和属性的对象。
也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等。
但是注意, 这里它们并不是同一个对象。
在Vue组件中, 如果我们调用action中的方法, 那么就需要使用dispatch

mutations:{
	incrementCount(state,payload){	
		state.counter += payload.count;
	}
}

actions:{
	increment(context,payload){	
		return new Promise((resolve=>{
			context.commit('incrementCount',payload)
		}))
	}
}

methods:{
	addFive(){
		this.$store.dispath('increment',{count:5}).then(res=>{
			console.log('完成更新');
		});
	}
}