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进行数据的查询,就会方便很多。具体实例如下: