Vue.observable()的使用,小型Vuex的使用

Posted 是小橙鸭丶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.observable()的使用,小型Vuex的使用相关的知识,希望对你有一定的参考价值。

定义
        让一个对象可响应,vue内部会用它来处理data函数返回的对象,返回的对象可以直接用于渲染函数和计算属性内,并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器,observable()方法,用于设置监控属性,这样就可以监控viewModule中的属性值的变化,从而就可以动态的改变某个元素中的值,监控属性则通过返回一个函数给viewModule对象中的属性,从而来监控该属性。返回的对象可以直接用于渲染函数methods和计算属性computed内,并且会在发生改变时触发相应的更新。我称它为小型Vuex

用法:在非父子组件通信时,可以使用通常的bus或者使用vuex,但是实现的功能不是太复杂,而使用上面两个又有点繁琐。这时,observable就是一个很好的选择

建立对应的文件如store.js

import Vue from 'vue'

export const obsData = Vue.observable(
  isRefreshList: false, // 刷新列表
)

直接在其它两个需要的vue文件引入使用

如create.vue文件

  import  obsData  from '../data/store' 引入


在对应状态需要操作数据如
obsData.isRefreshList = true

此时在index.vue文件

import  obsData  from '../data/store'


export default 
    data() 
        return
            obsData, //定义引用一下
            
    ,
    watch:   //在watch做你对应想做的操作
      'obsData.isRefreshList': 
        handler(val) 
          if (val) 
            this.search()
            obsData.isRefreshList = false
          
        ,
        deep: true,
      ,
    ,

效果如图

 

 

 

这样小型vuex即可,觉得有用的朋友点击三联噢 谢谢

以上是关于Vue.observable()的使用,小型Vuex的使用的主要内容,如果未能解决你的问题,请参考以下文章

Vue.observable()的使用,小型Vuex的使用

使用Vue2.6提供的新API Vue.observable手动打造一个Vuex

观察 Vue Observable 的变化

Vue.observable()使用方法

Vue 全局变量破坏使用 TypeScript 构建

Vue Router 实现原理