vue:简单方法替代vuex或者bus

兄弟组件,隔代组件传值很麻烦,方法虽然多,但都各有缺点。

vuex: 适合数据量大,并且函数集中处理。

bus:适合数据虽少,却不得不用的时候,维护困难。

root:这儿指将值挂在root组件上,需要的组件都到root上去取。

有时候数据量不多,觉得引入vuex又使得项目变得沉重,使用全局bus又显得不好维护,使用跟组件更是感觉跟理念不符合。

store:这就是介绍的简单方法。详细如下

需了解: 1、import 引入文件是引用的地址,并不是将数据复制一份,就是说该变了数据后,原文件的数据会发生变化。可以利用这个特性来传递数据。

    2、data里挂载的数据是动态绑定的。

1 // store.js
2 export default {
3     a: 1,
4     b(val) {
5         console.log(val)
6     }
7 }
// 需要使用公用数据的 组件
import store from ‘./store.js‘
export default {
  data() {
    return { store }
  },
}

store里的方法可以当methods里面的方法使用。任何组件改变了store里的值,所有组件store里的值都会发生改变。

时间: 2024-07-30 14:31:41

vue:简单方法替代vuex或者bus的相关文章

定义了一个vue全局方法,不能再vuex中进行调用

你把函数定义在 Vue 的原型链上,只能在 Vue 的实例里才能取到这个方法. vue组件 是一个Vue 的实例,所以你当然能在这里调用到 ajax 方法. 而,vuex 只是一个 vue插件,在 vuex 里的 this 不是指向 vue实例的,所以肯定是取不到 ajax 方法的. 建议:把函数放在一个单独的模块里定义,这样你在项目的不同地方,可以通过 import 的方式引入使用. 原文地址:https://www.cnblogs.com/eternityz/p/12272533.html

Vue简单基础 + 实例

vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调.当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时,Vue 将遍历它的属性,用 Object.defineProperty() 将它们转为 getter/setter.用户看不

Vue中状态管理——Vuex

vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试. 在vuex出现之前,vue里面的状态是属于'单向数据流'.举个官网的例子: new Vue({ // state data () { return { count: 0 } }, // view template: `<div>{{ count }} </div`, // actions methods: { increment () { this.count++ } } }) 其中 state

vue组件通信传值——Vuex

一.Vuex介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 也集成到 Vue 的官方调试工具devtools extension,提供了诸如零配置的 time-tavel 调试.状态快照导入导出等高级调试功能. 1.状态管理模式 一个简单的 Vue 计数应用范例如下所示: new Vue({ // state data () { return { count: 0 } }

将Linux代码移植到Windows的简单方法

将Linux代码移植到Windows的简单方法 一.前言 Linux拥有丰富各种源代码资源,但是大部分代码在Windows平台情况是无法正常编译的.Windows平台根本无法直接利用这些源代码资源.如果想要使用完整的代码,就要做移植工作.因为C/C++ Library的不同和其他的一些原因,移植C/C++代码是一项困难的工作.本文将以一个实际的例子(Tar)来说明如何把Linux代码移植到Windows平台上.移植过程将尽量少修改代码,以便代码的运行逻辑不会发生任何变动.保留绝大部分软件主要功能

easyui的datebox格式化最简单方法

看了网上有很多的解决方法,我也写一个比较简单方法.实现easyui的datebox格式化.效果如下,用"++"隔开,看你喜欢用什么都可以. 1.html <span class="span1">证件有效期至:</span> <span><input id="passvali" name="hotel.passvali"></span> 2.js /* 证件有效期至 *

Webbrowser控件判断网页加载完毕的简单方法

一般情况下,当ReadyState属性变成READYSTATE_COMPLETE时,Webbrowser控件会通过触发DocumentCompleted事件来指示网页加载完毕.但当加载的网页包含frame时,可能会多次触发该事件,所以不能简单地通过它来判断网页加载完毕.从微软的官方网站上了解到,并非每个frame都对应了一个DocumentCompleted事件,只有触发了DownloadBegin事件的frame才会有相应的DocumentCompleted事件.另外,最外层的frame总是最

Ubuntu12.04在无网络环境下配置apt-get光盘源的简单方法

许多数据库服务器是不能连上internet,想更新安装包就比较麻烦. 通常可以先在有internet环境的计算机上下载deb包,在拷贝到服务器安装deb,这样很难处理包的依赖关系. apt-get可以解决包的依赖关系,但是默认配置下需要从internet下载包,如果可以从本地读取安装源就可以解决包的依赖关系和无internet的问题. 步骤参考: 1.把光盘插入光驱,并且挂载到本地: mount /dev/cdrom  /mnt 2.备份后修改source.list仓库配置文件: mv /etc

Android peferenceActivity 自定义标题简单方法

Android peferenceActivity 自定义标题简单方法 peferenceActivity 完全使用定义好的布局. 因此不能简单象其它好窗口进行自定,现在我们需要加 一个自定义标题,比如象其它窗口一样加一个统一topbar. 假设这个topbar的布局是 title.xml 一.标准自定义标题栏方法 Android 提供自定义标题栏方法 我们简单实现. @Override protected void onCreate(Bundle savedInstanceState) { f