vue中的状态管理器（Vuex）

vue中的状态管理器（Vuex）

vuex插件 vuex是专为vue.js应用程序开发的状态管理模式

原理

当我们的组件数据发送改变的时候，我们这个组件的状态就改变了

数据改变就为一个动作，然后store进行数据扭转，进行视图展示，然后形成一个闭环

vuex提供一个仓库，为store，创建store实例对象。

通过使用我们的状态管理器，可以进行组件之间的通信

5个核心

分别是state、getter、mutation、action以及module。：

1、state

state状态数据，在state中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了。状态数据的定义都在state里面

2、getter

getter有点类似vue.js的计算属性，当我们需要从store的state中派生出一些状态，那么我们就需要使用getter，getter会接收state作为第一个参数，而且getter的返回值会根据它的依赖被缓存起来，只有getter中的依赖值（state中的某个需要派生状态的值）发生改变的时候才会被重新计算。
如果不需要缓存的话，需要写成方法

3、mutation

更改store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。

4、action （动作）

改变state里面的数据，定义一个方法，两个参数，第一个参数为我们的store，第二个为我们的对象

action可以提交mutation，在action中可以执行store.commit，而且action中可以有任何的异步操作。在页面中如果我们要嗲用这个action，则需要执行store.dispatch

5、module

module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，每个模块中拥有自己的state、mutation、action和getter。

使用

定义我们的store，暴露出来

定义我们的数据

//所有的定义数据都在我们的state里面，因为我们的组件的状态由我们的数据觉得的，所以在state里面定义我们的数据
state:{
	token:''	
}
//定义动作，一般对我们的数据进行修改
action:{
	//定义我们处理数据的方法
	setToken(store,obj){
		//将我们的数据提交到我们的数据扭转工具中
		store.commit('fnname',obj)
	}
}
//进行数据扭转
mutation:{
	mutationToken(state,obj){
		state.token = obj
	}
}
//定义获取数据的方式
getters:{
	//这是一个getters方法，所以我们这里需要将我们的值return出来
	getToken(state){
		return state.token
	}
}

在我们的组件中定义使用$store来进行值获取和设置

//获取我们的token
this.$store.getters.getToken.token
//设置我们的token,使用我们的dispatch，参数为我们的action中定义的方法,和要传入的值。dispatch类似于我们的$emit方法
this.$store.dispatch(‘setToken’，‘new token’)

使用module将store分割成模块，分割作用域

//命令空间,在store中一个modules属性，接收一个对象
modules:{
	//根据我们的实际情况来定义这个对象的名称
	common:{
		//开启我们的命令空间，状态作用域
		nameSpaced:ture
		//配置我们的state，gettersdengd
	}
}

在定义了我们的命令空间后，我们的getters里面的getToken方法就会有我们定义的common对象标识为 common/getToken，所以我们再调用的时候改为我们的中括号

this.$store.getters.['common/getToken']//获取对应的值

模块分割

将我们逻辑操作对象，进行单独的封装，然后再引入我们的不同对象里面