Vuex状态管理库实用解析

简介

官方解释

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

个人理解

Vuex我个人理解的话其实就比较简单；
把Vuex当成一个状态管理的库，在这里面储存了很多信息，这些信息能够在同一个app或者同一个网站的不同页面都能够获取得到，并且这个库里面的数据能够实现响应式的改变。
其实也就是一个数据更改和获取的意思，由于父子组件可以通信，但是在组件庞大的情况下，那么我们想要实现这个通信传输的时候，如果我们全部使用父子通信，那么维护起来就非常的繁琐，并且代码量也非常的大，因此我们就会使用Vuex这个状态管理库。

一、Vuex安装

我们Vuex的使用常常是基于Vue脚手架，我们这里便以vue-cli2.x版本来做一个示例。

npm install vuex --save

以上命令行安装最新版本的vuex

promise兼容IE

由于Vuex是基于promise的，promise为es6语法，那么部分浏览器会有不兼容的情况，那么这里提供一个ie的解决办法，其他浏览器就自行去查找，一般新版本浏览器都是兼容的

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

这其实是官方给出的一种解决办法

那么当我使用npm安装完成以后就会在package.json文件当中看到有这个配置文件，显示当前的版本为3.5.1

二、Vuex分离为外部文件并引入

为什么要把vuex内容的文件分离呢？
我们书写代码都讲究一个结构，结构划分的细，那么我们后期维护起来就非常的繁琐，如果我们将代码步步分离，我们需要看哪个类型的文件就去找哪个文件这样机会非常方便

我们一般是默认在src目录中创建一个store文件夹，在这个文件夹中创建一个index.js的入口文件，那么我们在这个文件当中就可以开始Vuex模块的引入。

index.js基本结构

基本结构如上图来说就非常的直观了
我们分别将vue和vuex两个模块导入，然后将vuex添加在vue当中，创建store对象，最后导出这个store，那么关于这五个属性我们稍后详细说。
当这个文件创建完毕后，我们还需要在vue实例当中去挂载一下store这个仓库，这样才能够在这个实例对象的所有页面当中都能够使用这个store

导入main.js并挂载在vue实例中

这边还是给大家截个图

挂载这步操作相当于，Vue.prototype.$store = store这步操作
这样就会多出一个公有的$store对象,也就是Vuex的实例对象。
这样我认为讲的比较详细了。

三、Vuex的五个属性

单一状态树

vuex有这样一个概念就是单一状态树，那么我们通俗一点来讲就是他只有一个vuex的实例对象，并不是它只能实例化一个对象，而是我们默认情况下只实例化一个对象这样他就拥有单一的数据源

1、state

关于state属性其实就比较简单，是vuex当中的数据源，用来存储一些需要的数据之类的，你可以把它理解为vue实例对象当中的data属性，它们有着相同的特性
举个例子：这里定义一个num=100

const store = new Vuex.Store({
	state:{
		num:100
	}
)}

注意：只有实例话后的数据才能够是想响应式更改，后动作创建的属性不能够实现响应式的更改

2、mutations

这个方法类似于vue实例中的methods属性，定义更改state数据源中的方法，这边要注意的是 所有更改state数据源中的动作都必须通过mutations 不然无法实现响应式数据，vuetools无法跟踪数据更改
那么总的来说这里是用来定义动作的一个地方

const store = new Vuex.Store({
	state:{
		num:100
	},
	mutations:{
		addNum(state){
			state.num++
		}
	}
)}

mutations属性下面的所有方法都包含一个state参数，很明确它指的是state数据源对象，这样就很好操控

调用mutations当中的方法

我们在vue实例对象当中调用这个方法的时候是使用的commit
例：

export default {
	methods:{
		addnum(){
			return this.$store.commit('addNum','参数')//第一个参数是mutations中的方法名，第二个是需要传递过去的参数
			
		}
	}
}

注意：mutations中不能够使用异步操作，异步操作统一在action中使用

3、actions

类似于mutations，用来代替它进行异步操作
调用actions中的方法使用dispatch

export default {
	methods:{
		addnum(){
			return this.$store.dispatch('addNum','参数')//第一个参数是actions中的方法名，第二个是需要传递过去的参数
			
		}
	}
}

4、getters

类似于computed，用于存放用于修改状态的方法，自带state参数
当你要对数据源加以修饰以后再更改的时候就使用这个属性
调用方法：

export default {
	methods:{
		addnum(){
			return this.$store.getters.addNum()
			//直接调用getters属性
		}
	}
}

补充getters中方法的参数传递

由于getter下的方法，是直接通过调用getters这个属性然后在来调用这个方法的，没有一个中间方法，所以我们传参数就特别一点
如下示例：调用还是直接在小括号当中添加参数，不过接收参数有一点小的变化

const store = new Vuex.Store({
  getters:{
	addNum('由于这里面参数是固定的例如state，所以我们正常传参数传不进来'){
		return ('参数')=>{
			//函数体
			//利用返回函数的形式传递参数
		}
	}
  }
})

5、modules

这个属性和它的名字一样理解，模块化，大致作用是将这个vuex的实例化数据源进行一个模块化，再简单点就是一个分类。

const store = new Vuex.Store({
  modules:{
		a:{
			state:{},
			mutations:{},
			action:{},
			getters:{}
		}
	}
})

结构写出来想必大概就能够理解这个东西怎么用了。
modules里面的东西会被扔进大的vuex实例对象的数据源state里面
小的state也会被直接扔进去，调用也直接调用，实际上是在一个地方，只是表面看起来我们是将代码分离了。

那么关于vuex就分享到这里，有错误或者补充的话请评论指出