VUE---vuex

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：以下内容均为个人总结，无任何商业用途

---

提示：以下是本篇文章正文内容，下面案例可供参考

一.vuex 介绍

Vuex

是一个专为 Vue.js 应用程序开发的【状态管理模式】， 采用【集中式存储管理】应用的所有组件的状态，解决多组件数据通信。

个人对vuex的理解：

Vuex其实就是一个为Vue.js设计的数据仓库，就是把各个组件公用的数据放到一个仓库里面进行统一的管理，这样既使得非父子组件间的数据共享变得简单明了，也让程序变得更加可维护（将数据抽离了出来）,而且只要仓库里面的数据发生了变化，在其他组件里面数据被引用的地方也会自动更新。

二.为什么要使用Vuex？

2.1 组件间传值复杂

如果你之前用过Vue.js开发过项目，你一定会被各个组件之间的传值搞得晕头转向，特别是非父子组件之间传值时。利用Vuex我们可以将组件之间共享的数据抽取出来，单独存放在一个store（仓库）中去，这样各个组件需要数据的时候直接去仓库里面拿就好了，不用组件之间复杂的传值了，而且需要改变数据的时候，只需要将仓库里面的数据更改即可，各个组件里面引用的地方会自动更新

2.2 Vue中的单项数据流

与单向数据流对应的就是双向数据流：双向数据流在Vue中也叫做‘双向绑定’，其实现主要是依靠MVVM框架，在Vue中主要由三个部分组成：View、ViewModel、Model。其中View可以简单的理解为视图层，Model可以简单的理解为数据层，其中View与Model之间是不能直接通信的，必须得依靠ViewModel中间件来完成。通过ViewModel就可以实现数据双向绑定，也就是View与Model之间的同步是自动的，Model数据改变了View视图上的数据也会跟着改变，而不必手动去更新

三.vuex五个核心属性：

1.state：

vuex用它来保存公共数据，state中保存的数据是响应式的，如果修改了数据，视图上的值也会一起变化

2.mutation：

用于修改state中的数据，每个 mutation 都有一个字符串的 【事件类型 (type)】 和 一个 【回调函数 (handler) 】。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

3.getters：

类似于vue.js中的计算属性，在state中数据的基础上，进一步对数据进行加工得到新数据

4.actions：

actions 要修改state中的数据需要通过 mutation去修改，在 actions 中可以执行 store.commit，而且 actions 中可以有任何的异步操作。在页面中如果我们要调用用这个 actions，则需要执行 store.dispatch

5.modules:

拆分模板，把复杂的场景按模块来拆开

图解vuex的执行过程

注意，这边介绍一个小技巧（mapstate方法映射）

在写代码的过程中会发现我们很多地方需要用到store里面的数据，那我们就要在很多地方写this.$store。这样看起来代码是十分冗余的。所以为了解决这个问题，我们引入了对象展开运算符mapState 来简化。