Vuex学习笔记

1、Vuex的概述

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

下面这几种方式比较适用于小范围的共享。
父向子传值 ： v-bind 属性绑定
子向父传值： v-on 事件绑定
兄弟组件之间共享数据： EventBus

• $on 接收数据的那个组件
• $emit 发送数据的那个组件

1.2 Vuex 是什么？

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

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

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

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

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

2、Vuex 的核心概念

2.1 State

定义变量。相当于 Vue 文件中 data 属性。

2.2 Mutation

对 state 中的数据进行赋值操作，使用 commit 来进行赋值。统一修改 共享的数据，方便后期代码的维护。是一个 同步方法。

2.3 Getter

对 state 中的数据进行 查询 操作，例如 当后端没有给出 查询详情页面接口的时候，根据 id 查询直接再在 state 中 通过 getter 进行查询渲染。相当于 computed 计算属性。

2.4 Action

可以使用异步方法获取到的state 的值，比如发起请求就可以在 action 中实现。页面上可以使用 dispatch 方法。

1）页面之间共享数据例子

注：使用vuex进行数据管理，如果页面之间需要传递数据而使用，比如说查看新闻详情，后端缺没有提供根据id查询接口的时候，我们是用vuex 中的getters进行数据的查询，就会方便很多。具体实例如下：