Vue.observable()的使用,小型Vuex的使用
让一个对象可响应,vue内部会用它来处理data函数返回的对象,返回的对象可以直接用于渲染函数和计算属性内,并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器,observable()方法,用于设置监控属性,这样就可以监控viewModule中的属性值的变化,从而就可以动态的改变某个元素中的值,监控属性则通过返回一个函数给viewModule对象中的属性,从而来监控该属性。返回的
·
定义
让一个对象可响应,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即可,觉得有用的朋友点击三联噢 谢谢
更多推荐
已为社区贡献5条内容
所有评论(0)