使用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 相关文章推荐
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
JavaScript基于setTimeout实现计数的方法
May 08 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
js实现双色球效果
Aug 02 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
微信小程序 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重新实现PHP脚本引擎内置函数
2007/03/06 PHP
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
php简单生成随机数的方法
2015/07/30 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
JS实现手风琴特效
2020/11/08 Javascript
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
python编程嵌套函数实例代码
2018/02/11 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
Python hashlib模块加密过程解析
2019/11/05 Python
Python爬取梨视频的示例
2021/01/29 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
文明村镇申报材料
2014/05/06 职场文书
如何写股份合作协议书
2014/09/11 职场文书
平面设计师岗位职责
2014/09/18 职场文书
办理信用卡工作证明
2014/09/30 职场文书
如何写观后感
2015/06/19 职场文书