Vue全家桶之Vuex（State、Mutation、Action、Getter）

 

---

1.Vuex 概述

1.1 组件之间共享数据的方式

• 父向子传值：v-bind 属性绑定
• 子向父传值：v-on 事件绑定
• 兄弟组件之间共享数据： EventBus事件中心 （$on 接收数据的那个组件   $emit 发送数据的那个组件）

1.2 Vuex 是什么

Vuex 是实现组件全局状态（数据）管理的一种 机制 ，可以方便的实现组件之间 数据的共享。

Vuex采用 类似全局对象的形式来管理所有组件的公用数据，如果想修改这个全局对象的数据，得按照Vuex提供的方式来修改（不能自己随意用自己的方式来修改）。

 

1.3 使用 Vuex 统一管理状态的好处

① 能够在 vuex 中 集中管理共享的数据 ，易于开发和后期维护

② 能够高效地实现 组件之间的数据共享 ，提高开发效率

③ 存储在 vuex 中的数据都是 响应式 的，能够实时保持数据与页面的同步

不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）mutations来实现修改

 

1.4 什么样的数据适合存储到 Vuex 中

一般情况下，只有组件之间 共享的数据 ，才有必要存储到 vuex 中；对于组件中的私有数据，依旧存储在组件

自身的 data 中即可。

 

2.Vuex 的基本使用

1. 安装 vuex 依赖包 

npm install vuex --save