vue 实现数据共享模式.

Posted 2023-05-09

参考技术A

vue 都是组件化的开发模式.

整个组件树中,组件和组件之间的关系如下图所示.

父子组件传值一般用 props & events 即可.

但是非父子组件之间,如何传值会有很多的解决方案.

一般都建议使用 vuex 官方提供的集中式状态管理工具.

但此方案有可能过于笨重,写起来也并不方便,还需要专门引入 vuex 库,增大项目的打包体积.

使用 store 模式来解决组件间数据状态共享的问题.

store 模式的核心很简单:

定义一个很简单的全局单例对象,此提供一些数据,在组件间共享.

将此对象定义在需要使用到的组件,并设置在 data 属性上即可.

A 组件需要使用.

B 组件需要使用.

效果:

总结:

第二种,使用一个 new Vue 实例,去承载共享数据的功能. 实例内部的 methods , computed , watch 等,可以用于对数的监视和控制.

在 A 组件上使用

在 B 组件上使用

效果:

总结:

码云地址

vuex 实现vue中多个组件之间数据同步以及数据共享。

前言

　　在一些项目中有很多数据状态之间要实现数据共享状态共享，例如购物车的数据、用户的登录状态等等。vue父元素是可以通过props向子元素传递参数，子元素也可以通用smit向父元素传递参数。但是像购物车这种在项目中多个位置的引用时就会变得很麻烦。例如项目中使用了三个购物车的组件，那么当其中一个组件的值发生改变时，就要通过自身告诉父组件我的值发生改变了，然后父组件在通知其他两个购物车组件值发生改变了，需要进行同步，这样就会变得很麻烦。而vue-v就可以帮助我们解决这个繁琐的问题。