Vue全掌握——数据共享

最新推荐文章于 2024-05-20 15:40:00 发布

C-A-L-D

最新推荐文章于 2024-05-20 15:40:00 发布

阅读量459

点赞数

分类专栏： web前端-框架

本文链接：https://blog.csdn.net/qq_42952262/article/details/106926500

版权

5 篇文章 0 订阅

订阅专栏

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

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

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

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

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

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

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

安装vuex

var store = new Vuex.Store({
  // 仓库数据配置
})
Vue.use(Vuex);
new Vue({
  // 其他配置
  store
})

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

数据的改动

必须要提交commit一个mutation

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

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

什么是副作用操作：

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

触发dispatch一个action

直接通过mutation改动仓库数据

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

在这里插入图片描述

关注

专栏目录