Vue中的Observable()

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

简单来说,复杂的项目用vuex,简单点的项目用Vue.observable()。

定义:

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

viewModule对象的形式有两种,一种可以是var obj={};的形式,另一种是通过new 实例化的对象,比如,function myclass1(){this.name=""},类,实例化对象var obj=new myclass1();

该方法有两种用法,读和写:

1.读

var b=ko.observable();//该方法会读取b属性的当前值,并设置该属性为监控属性,实际上就是把一个函数赋值给该属性。

2.写

var b=ko.observable(“数据内容”);//该方法会设置b属性的当前值,并设置该属性为监控属性,实际上就是把一个函数赋值给该属性,通过该方法可以让属性成为监控属性,监测属性值的变化,监控属性是设置在viewModule对象中的属性中的。

当设置了监控属性后属性,成为双向绑定,即改变两者的一方的内容,都会改变另一方的内容,两者是相互的。

实例:

1.创建store.js 最好和main.js平级创建文件

import Vue from 'vue'

export const store = Vue.observable({
  name: '李四'
})
export const mutations = {
  setName (data) {
    store.name = data
  }
}

2.在两个组件中调用改写 (如果全局都有使用,也可在mian.js通过Vue.pototype来全局挂载,不用每个组件都引入)

<template>
  <el-row>
    <span @click="findClick">{{data}}</span>
  </el-row>
</template>

<script>
import {store, mutations} from '@/store.js'
export default {
  name: 'mainView',
  data() {
    return {
      data: ''
    }
  },
  mounted() {
    this.data = store.name // 引入store.js 通过定义的store直接获取
  },
  methods: {
    findClick() {
      this.$router.push({path: '/login'})
      mutations.setName('我改了') // 引入store.js 通过定义的mutations下边的方法修改
    }
  }
}
</script>

Vue.observable()不适用于2.6以下的版本。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • webpack中的mainself和构建目标

    3.webpack 的 runtime 和 manifest,管理所有模块的交互。

    刘亦枫
  • JavaScript中的过滤器(filter)

    filter()方法会创建一个新数组,原数组的每个元素传入回调函数中,回调函数中有return返回值,若返回值为true,这个元素保存到新数组中;若返回值为fa...

    刘亦枫
  • CSS常用的两个函数

    这个感觉是最常用也最实用的的一个方法。 这个函数,可用在如,左右布局,一边宽度固定,另一边撑开左右宽的情景。 calc() 函数用于动态计算长度值。 语法...

    刘亦枫
  • 崔永元当前的处境究竟有多危险?

    10月7日上午,微博账号“@小崔读书汇”发布《一声长叹一声雷》文章。文章提到,“上海公安局经侦大队对所有我参与的公司彻底侦察,对我以前的助理不断询查,彻夜询查。...

    精讲java
  • java web部署 启动线程 (监听socket等)

    用户1258909
  • 001.Ceph简介概述

    Red Hat Ceph是一个分布式的数据对象存储,系统设计旨在性能、可靠性和可扩展性上能够提供优秀的存储服务。分布式对象存储是存储的未来,因为它们适应非结构化...

    木二
  • 推荐一款轻量化、易用的css框架bulma.css

    最大的特点:简单好用 提供二十多种常用组件,比如表单 、表格、图标、面包屑、菜单、导航、Modal 窗口等等。简单的网站,可以不用写任何 CSS 代码。

    薛定喵君
  • Service Worker离线缓存实战

    最近实战了 Service Worker(以下简称“sw”)来进行网站缓存,以实现离线状态下,网站仍然可以正常使用。

    心谭博客
  • 虚拟现实前传-Three.js实现管壳式换热器3D模型在线查看

    使用threejs实现3D模型加载和显示。3D编程就像拍大片,几个关键东西如下所列:

    周星星9527
  • 百年老牌的创新之路:看可口可乐如何用AI、大数据颠覆传统营销

    作者:Smart M 来源:wealth 创立于1886年,可口可乐(Coca-Cola)不仅是耳熟能详的百年老品牌,更在大多数国家的可乐市场处于领导地位。随着...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券