使用Vue.observable()进行状态管理的实例代码详解


Posted in Javascript onMay 26, 2019

随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。

先看下官网描述,如下图

 使用Vue.observable()进行状态管理的实例代码详解

observable()方法,用于设置监控属性,这样就可以监控viewModule中的属性值的变化,从而就可以动态的改变某个元素中的值,监控属性的类型不变量而是一个函数,通过返回一个函数给viewModule对象中的属性,从而来监控该属性。

说那么多,我们在实际例子中尝试玩一下:

搭建个简单脚手架,在项目src目录下建立store.js,在组件里使用提供的 store和 mutation方法,同理其它组件也可以这样使用,从而实现多个组件共享数据状态。

首先创建一个 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;
  }
}

然后在组件Home.vue中引用,在组件里使用数据和方法:

//Home.vue
 <template> 
    <div class="container"> 
      <home-header></home-header> 
      <button @click="setCount(count+1)">+1</button>
      <button @click="setCount(count-1)">-1</button>
       <div>store中count:{{count}}</div>
      <button @click="changeName(name1)">父页面修改name</button>
      <div>store中name:{{name}}</div>
      <router-link to="/detail" ><h5>跳转到详情页</h5>  </router-link>
    </div> 
  </template> 
  <script> 
    import HomeHeader from '../components/HomeHeader'  
    import {store,mutations} from '@/store'
    export default { 
      data () { 
        return { 
          name1:'主页的name'
        } 
      }, 
      components: { 
        HomeHeader 
      }, 
      computed:{
        count(){
          return store.count
        },
        name(){
          return store.name
        }
      },
      methods:{
        setCount:mutations.setCount,
        changeName:mutations.changeName  
      }
    } 
  </script>

 使用Vue.observable()进行状态管理的实例代码详解

再定义一个子页面观察数据:

//Detail.vue
<template> 
  <div class="detail"> 
    <detail-header></detail-header> 
    <button @click="changeName(name2)">子页面修改name</button>
    <p>store中name:{{name}}</p>
  </div> 
</template> 
<script> 
  import DetailHeader from '../components/DetailHeader' 
  import {store,mutations} from '@/store'
  export default { 
    components: { 
      DetailHeader 
    } ,
    data(){
      return {
        name2:'子页的name'
      }
    },
    computed:{
      name(){
        return store.name
      }
    },
    methods:{
      changeName:mutations.changeName
    }
  } 
</script>

子页面显示如图:

使用Vue.observable()进行状态管理的实例代码详解 

我们简单点击下按钮,改变下store中的数据,效果如下:

使用Vue.observable()进行状态管理的实例代码详解 

最后补充一点,就是如果当前项目vue版本低于2.6,要使用Vue.observable(),就必须要升级,升级 vue 和 vue-template-compiler,两者的版本需要同步,如果不同步项目会报错。

//升级vue版本
npm update vue -S 或者 yarn add vue -S
npm update vue-template-compiler -D 或者 yarn add vue-template-compiler -D

总结

以上所述是小编给大家介绍的使用Vue.observable()进行状态管理的实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
容易被忽略的JS脚本特性
Sep 13 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
全面解析Bootstrap表单样式的使用
Sep 09 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
Node与Python 双向通信的实现代码
Jul 16 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 #Javascript
vue项目打包后怎样优雅的解决跨域
May 26 #Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 #Javascript
vue实现的请求服务器端API接口示例
May 25 #Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 #Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 #Javascript
了解JavaScript中的选择器
May 24 #Javascript
You might like
php通用防注入程序 推荐
2011/02/26 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
window.parent与window.openner区别介绍
2012/04/12 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
2015/12/29 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
javascript制作照片墙及制作过程中出现的问题
2016/04/04 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python matplotlib画图实例代码分享
2017/12/27 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
女子职高个人自荐书
2014/02/01 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
书香校园活动方案
2014/02/28 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
先进典型发言材料
2014/12/30 职场文书
运动会致辞稿
2015/07/29 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis