Vue.observable怎么使用,解决处理什么问题
Admin 2022-07-11 群英技术资讯 543 次浏览
随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。
首先创建一个 store.js,包含一个 store和一个 mutations,分别用来指向数据和处理方法。
//store.js import Vue from 'vue'; export let store =Vue.observable({count:0,name:'李四'}); export let mutations={ setCount(count){ store.count=count; }, changeName(name){ store.name=name; } }
然后再在组件中使用该对象
//obserVable.vue <template> <div> <h1>跨组件数据状态共享 obserVable</h1> <div> <top></top> <bottom></bottom> </div> </div> </template> <script> import top from './components/top.vue'; import bottom from './components/bottom.vue'; export default { name: 'obserVable', components: { top, bottom } }; </script> <style scoped> </style>
//组件a <template> <div class="bk"> <span ><h1>a组件</h1> {{ count }}--{{ name }}</span > <button @click="setCount(count + 1)">当前a组件中+1</button> <button @click="setCount(count - 1)">当前a组件中-1</button> </div> </template> <script> import { store, mutations } from '@/store'; export default { computed: { count() { return store.count; }, name() { return store.name; } }, methods: { setCount: mutations.setCount, changeName: mutations.changeName } }; </script> <style scoped> .bk { background: lightpink; } </style>
//组件b <template> <div class="bk"> <h1>b组件</h1> {{ count }}--{{ name }} <button @click="setCount(count + 1)">当前b组件中+1</button> <button @click="setCount(count - 1)">当前b组件中-1</button> </div> </template> <script> import { store, mutations } from '@/store'; export default { computed: { count() { return store.count; }, name() { return store.name; } }, methods: { setCount: mutations.setCount, changeName: mutations.changeName } }; </script> <style scoped> .bk { background: lightgreen; } </style>
显示效果
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
使用JS如何画平滑曲线?在实际的项目中,我们常会遇到在各种图表框架中画平滑曲线的需求,那么这要怎样做呢?对此下文给大家分享一下JS如实现平滑曲线的实例,感兴趣的朋友可以参考。
jquery替换a标签中间内容的方法:1、利用“$(a标签元素)”语句获取指定的a标签元素对象;2、利用html()方法来替换a标签中间的内容,语法为“a标签元素对象.html(要替换的内容);”。
这篇文章主要介绍了uni-app 的条件编码和页面布局,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
图像优化对于网站建设和优化来说,是很重要的一部分,能大大提高网站的性能。对此,本文就给大家来分享一下JPEG/JPG、PNG、WebP这些常见的图片怎样优化,这些图像的应用场景及优缺点?
每个前端项目都有 npm scripts,我们会用 npm scripts 来组织编译、打包、lint 等任务。 大家可能经常会跑 npm scripts,但却对这些命令行工具是怎么实现的并不了解。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008