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

在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值