Vue全家桶之VueX详解

VueX是什么？

VueX文档：https://vuex.vuejs.org/zh/

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说vuex就是对整体页面的数据传递进行管理。

使用VueX的优点

1. 能够在vuex中集中管理共享的数据，易于开发和后期维护
2. 能够高效地实现组件之间的数据共享，提高开发效率
3. 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

什么样的数据适合存储到VueX当中？

一般情况下，只有组件之间共享的数据，才有必要存储到vuex中;对于组件中的私有数据，依旧存储在组件自身的data中即可。

VueX的使用

首先我们还是使用vue-cli构建一个项目，项目构建参考：VueCli 脚手架详解，项目构建好了之后，我们需要安装VueX

npm install vuex --save

安装之后在main.js文件当中添加vuex

import Vuex from 'vuex'
Vue.use(Vuex)

我们在进行全局变量的管理需要使用到一个js文件进行存储，在这里我们在src目录下新建一个store.js文件，代码如下所示：在这里面的state当中储存的值就是全局变量值。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {},
	actions: {}
})

//在定义vuex的时候还可以通过以下代码，效果一致，这样更好理解一点

const store = new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {},
	actions: {}
})
export default store

之后我们在其他组件如何获取到这个count全局的变量值呢？

1. 直接使用this.$store.state.count 即可获取到这个值
2. 从vuex当中按需导入mapState函数，之后通过导入的mapState函数，将当前组件所需的全局变量值进行映射给当前组件的computed计算
   

Mutation修改全局变量的值（有参、无参）

在VueX当中不推荐组件对全局变量的值进行修改。而推荐使用Mutation变更Store中的数据。

1. 只能通过mutation变更Store数据，不可以直接操作Store中的数据。
2. 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。

如何实现呢？在前面的基础上，我们在store.js文件当中添加一个mutations块，

mutations定义好了之后怎么使用呢？使用

this.$store.commit('方法名')

即可，如下图所示：

并且在使用mutation当中还可以携带值进行操作，定义一个带参是mutation函数，

		addN(state, step) {
			state.count += step
		}

在使用的时候，使用commit携带一个参数给到addN

this.$store.commit('addN',3)

其中我们还可以使用mapMutations将函数映射进来使用

action处理异步任务

在mutation同级目录下定义好这个actions对异步任务进行管理

而使用 this.$store.dispatch("asyncAdd") 即可调用这个actions的方法进行数据处理

而使用actions当中携带参数进行处理，和mutations的处理方式同理，

而在进行调用的时候我们也只需要加上一个参数即可，this.$store.dispatch("asyncAddN",4)

第二种方式进行获得actions进行映射

Getter数据加工

Getter用于对Store中的数据进行加工处理形成新的数据。

1. Getter 可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
2. Store 中数据发生变化，Getter 的数据也会跟着变化。

getters的定义和state同级，如下所示：

使用getters的值

具体代码实现如下所示：包含两种方式

VueX项目搭建案例分析与实现

首先我们还是有构建一个vue-cli项目进行开发，项目构建好之后，我们使用命令npm install vuex --save 添加vuex。之后启动项目。在这里我们可以使用vue ui 提供的ui界面导入我们所需的依赖。在vue-cli3 之后提供了这个ui。如果是vue-cli2 可以先将vue-cli卸载重新安装3版本，使用vue ui 命令打开，导入文件。

VueX和mixins

在vue当中提供了一个mixins混入，混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

当我们的vue文件当中存在很多定义的值，并且在多个界面当中使用，为了对代码进行简化，我们可以使用mixins混入。先使用一个js文件对需要进行混入的值进行定义

之后在vue文件当中进行导入，添加mixins混入即可进行使用了。

vuex和mixins的区别在于：

vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

mixins 和 公共组件的区别在于：

与公共组件的区别

同样明显的区别来再列一遍哈~

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。