vue.js 之道vuex
来源:互联网 发布:ps装修淘宝店铺 编辑:程序博客网 时间:2024/05/28 17:08
:组件之间的作用域独立,而组件之间经常又需要传递数据。
例子:
A 为父组件,下面有子组件 B 和 C。
A 的数据可以通过 props 传递给 B 和 C。
A 可以通过 $broadcast 调用 B 和 C 的 events,从而操作 B 和 C 的数据。
B 和 C 可以通过 $dispatch 调用 A 的 events,从而操作 A 的数据。
当 B 需要操作 C 的数据就会比较麻烦,需要先 $dispatch 到 A,再 $broadcast 到 C。如果项目比较小的话还好,越大的项目,涉及的组件通信就越多、越频繁,此时管理起来就会非常累,而且容易出错。
这就是 Vuex 的意义所在。它可以将数据置于单独的一层,并提供给外部操作内部数据的方法。粗俗一点,就这样理解吧。
=== === ===
更新:
Vue 2 发布了,修改了组件之间的通信方式,已经不会出现通信事件 ping-pong 的情况了。我们需要有一个 Vue 实例来充当通信媒介的作用,Vue 官方文档里将它叫做 event bus。
当我们需要组件之间事件通信的时候,只需要对这个 event bus 使用 $emit 和 $on 就可以了。
借助这样的改动,使得事件不再依靠事件链去传播,而是统一的在 event bus 中分发。但值得注意的是,发射事件和监听事件的代码是分散在各个组件中的,如果他们的复杂度让你难以把控,就需要 Vuex 登场了。
A 为父组件,下面有子组件 B 和 C。
A 的数据可以通过 props 传递给 B 和 C。
A 可以通过 $broadcast 调用 B 和 C 的 events,从而操作 B 和 C 的数据。
B 和 C 可以通过 $dispatch 调用 A 的 events,从而操作 A 的数据。
当 B 需要操作 C 的数据就会比较麻烦,需要先 $dispatch 到 A,再 $broadcast 到 C。如果项目比较小的话还好,越大的项目,涉及的组件通信就越多、越频繁,此时管理起来就会非常累,而且容易出错。
这就是 Vuex 的意义所在。它可以将数据置于单独的一层,并提供给外部操作内部数据的方法。粗俗一点,就这样理解吧。
=== === ===
更新:
Vue 2 发布了,修改了组件之间的通信方式,已经不会出现通信事件 ping-pong 的情况了。我们需要有一个 Vue 实例来充当通信媒介的作用,Vue 官方文档里将它叫做 event bus。
export default new Vue();
当我们需要组件之间事件通信的时候,只需要对这个 event bus 使用 $emit 和 $on 就可以了。
import Bus from './bus.js';export default Vue.extend({ template: ` <div>{{msg}}</div> `, data: () => ({ msg: 'Hello World!' }), created() { Bus.$on('setMsg', content => { this.msg = content; }); }});
import Bus from './bus.js';export default Vue.extend({ template: ` <div @click="sendEvent">Say Hi</div> `, methods: { sendEvent() { Bus.$emit('setMsg', 'Hi Vue!'); } }});
借助这样的改动,使得事件不再依靠事件链去传播,而是统一的在 event bus 中分发。但值得注意的是,发射事件和监听事件的代码是分散在各个组件中的,如果他们的复杂度让你难以把控,就需要 Vuex 登场了。
1 0
- vue.js 之道vuex
- Vue.js学习之vue-router vuex axios webpack
- Vue.js学习之vue-router vuex axios webpack
- vue插件之vuex
- Vue之Vuex
- 详解vue之vuex
- 21、vue.js 之vuex安装及使用
- Vue.js实战之使用Vuex + axios发送请求详解
- vue之vue-router vuex学习笔记
- [vue.js]vuex实现一个简易计数器
- Vue.js 系列教程 4:Vuex
- Vue.js+Vuex:一个简单的记事本
- Vue.js 系列教程 4:Vuex
- Vue.js数据状态管理-Vuex(-)
- Vuex + Vue.js 小小单应用
- Vue.js状态管理工具Vuex快速上手
- 详解Vue爬坑之vuex初识
- Vue之vuex的简单使用
- 获取或设置元素的值
- 使用mybatis的generator自动生成映射文件
- iOS 常用的各种各样的CALayer
- c++ 中文分词介绍
- 单链表操作之反转单链表
- vue.js 之道vuex
- 手机类
- 全排列
- 谈谈 BATJ3 面试
- Android 运行崩溃找不到so包解决方案
- struts2复习1
- 数据处理中白化Whitening的作用图解分析
- 创建节点元素
- MyEclipse快捷键大全