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 都会自动根据模块注册的路径调整命名。
上一篇:linux系统安装ftp服务


下一篇:微信支付流程