vuex（状态管理工具）

vuex是什么？

	Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。
	它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
	专门在vue中实现集中式的状态数据管理工具，对多组件中共享状态数据进行集中式的管理，
	也是一种组件间的通讯方式，切适用于任意组件

什么情况下我应该使用 Vuex？

	-   多个视图依赖于同一状态。
	-   来自不同视图的行为需要变更同一状态。

vuex的核心

	- State
	- Mutation
	- getter
	- action
	- module

State：

	例子：
	state:{
		key: value
	}
	state是vuex的单一状态树，就是用来储存数据的地方，本质就是一个对象
	我们可以通过 store.state.key 来读取state中的数据，也可以使用 mapState 辅助函数
	使用方式 在computed中 
	...mapState({key:'value'})或...mapState(['value'])
	key:组件中调用的值名，value是state中的状态（数据）名

getter：

	例子：
	getters:{
		addOne: (state)=>{
			return state.数据名 +1;
		}
	}
	getter相当于vue中的计算属性，传入一个state对state中的数据进行加工，然后返回一个可以使用的数据
	我们可以通过 store.getters.addOne 来读取getter中的数据，也可以使用 mapGetters 辅助函数
	使用方式 在computed中 
	...mapGetters ({addOne :'addOne'})或...mapGetters (['addOne'])
	addOne:getters中的数据名

Mutation：

	例子：
	mutations: {
	  increment (state, payload) {
	    state.count += payload.amount
	  }
	}
	payload：载荷在大多数情况下，载荷应该是一个对象
	mutation 必须是同步函数。
	使用方式 在methods中 
	创建一个方法，通过store.commit('increment , 对象)来调用它，用于修改state中的数据
	...mapMutations({increment :'increment '})或...mapMutations(['increment '])
	但是通过mapMutations函数调用没有办发传递参数，只能在绑定事件中调用@click = increment(参数)

action：

	例子：
	actions: {
	    increment (context) {
	      context.commit('increment')
	    }
	}
	Action 类似于 mutation，不同在于：

	-   Action 提交的是 mutation，而不是直接变更状态。
	-   Action 可以包含任意异步操作。
	通过 `context.state` 和 `context.getters` 来获取 state 和 getters
	Action 通过 `store.dispatch` 方法触发
	Action中是可以进行异步操作的
	使用方式 在methods中 
	创建一个方法，通过 store.dispatch('increment')来触发它
	...mapActions({increment :'increment '})或...mapActions(['increment '])

module：

	作用：用来分割store，当store过大时造成结构臃肿，就使用mutations来将store拆分
	每一个mutations中都有state,getters,mutations,actions
	这个时候我们在组件中调用模块中的state,getters,mutations,actions的时候就要store.模块名才能找到
	通过添加 `namespaced: true` 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

标签：状态,...,getters,管理工具,addOne,state,increment,vuex,store
来源： https://blog.csdn.net/twilightLeaves/article/details/123096449