使用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 相关文章推荐
JavaScript面向对象之体会[总结]
Nov 13 Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
详解angular2 控制视图的封装模式
Dec 27 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
node使用request请求的方法
Dec 20 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
js get和post请求实现代码解析
Feb 06 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
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
javascript 精粹笔记
2010/05/09 Javascript
Javascript笔记一 js以及json基础使用说明
2010/05/22 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
原生js实现跨浏览器获取鼠标按键的值
2013/04/08 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
使用script的src实现跨域和类似ajax效果
2014/11/10 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
通过实例解析Python return运行原理
2020/03/04 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
房屋租赁协议书
2014/04/10 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
警示教育片观后感
2015/06/17 职场文书
女性健康讲座主持词
2015/07/04 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
利用JuiceFS使MySQL 备份验证性能提升 10 倍
2022/03/17 MySQL
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android