Vue全掌握——数据共享

数据管理

在实际的开发中,经常会遇到多个组件共享一个数据的场景
在这里插入图片描述
面对这种场景,会产生至少以下两个问题:

多个组件如何共享同一份数据?
如果某个组件修改了数据,如何让其他组件知道?
面对这种问题,一个可行的解决办法,就是让数据提升

所谓数据提升,就是把数据提升到更加顶层的组件,让顶层的组件通过属性下发数据,而当组件想改变数据的时候,又通过事件一层层向上传递。

使用这种方式(传统实现方式),虽然可以解决问题,但是带来了更多的问题:
书写特别繁琐
依赖极其混乱:某些组件本来并不需要一些数据,但是由于它的子组件需要,自己也必须要接收
无谓的重新渲染:如果数据变化了,并不依赖这些数据的组件也会被迫重新渲染
为了解决这些问题,vuex出现了!

vuex专门用于解决共享数据问题,它的思路和上述一致,也是将数据提升到顶层,不过它使用了一些特别的技巧,不仅让组件的依赖更加清晰,当数据变动时,仅渲染依赖该数据的组件

但是要注意,并非所有数据都需要让vuex管理,通常vuex只管理那些需要被组件共享的数据

在实际的开发中,一些逻辑特别复杂的数据,尽管不共享,也可能提取到vuex中进行管理


安装(vuex安装和使用跟vue-router很相似)

安装vuex

  1. 在页面中引入vuex库
    该库提供了一个构造函数Vuex.Store,通过该构造函数,即可创建一个数据仓库
var store = new Vuex.Store({
  // 仓库数据配置
})
Vue.use(Vuex);
new Vue({
  // 其他配置
  store
})

安装vue devtools
这是一个chrome浏览器插件,用于调试vue、vue-router、vuex应用


vuex的核心概念

数据的改动

必须要提交commit一个mutation

在vuex中,提交mutation是数据变化的唯一原因

在mutation中不能出现副作用操作

什么是副作用操作:

改动或使用外部的数据
ajax
其他异步行为
处理副作用

触发dispatch一个action

store变化逻辑

直接通过mutation改动仓库数据
image-20200518124351876

通过actioin改动仓库数据
在这里插入图片描述

关系图

在这里插入图片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值