怎么使用Vue.observable()进行状态管理

  介绍

这篇文章给大家分享的是有关怎么使用Vue.observable()进行状态管理的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

Vue的优点

Vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。

先看下官网描述,如下图

, 怎么使用Vue.observable()进行状态管理

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

说那么多,我们在实际例子中尝试玩一下:

搭建个简单脚手架,在项目src目录下建立店。js,在组件里使用提供的商店和突变的方法,同理其它组件也可以这样使用,从而实现多个组件共享数据状态。

首先创建一个商店。js,包含一个商店和一个突变,分别用来指向数据和处理方法。

//store.js   import  Vue 得到& # 39;vue # 39;;      export  let  store =Vue.observable({数:0,名字:& # 39;李四& # 39;});={export  let 突变   setCount才能(计数){   ,,,store.count=计数;   ,,},   changeName才能(名字){   ,,,store.name=名称;   ,,}   }

然后在组件。vue中引用,在组件里使用数据和方法:

//Home.vue   & lt; template>大敌;   ,,,& lt; div 类=癱ontainer"祝辞,   ,,,,,& lt; home-header> & lt;/home-header>,   ,,,,,& lt; button  @click=皊etCount(数+ 1)“在+ 1 & lt;/button>   ,,,,,& lt; button  @click=皊etCount(把1)“在1 & lt;/button>   ,,,,,,& lt; div>商店中数:{{数}}& lt;/div>   ,,,,,& lt; button  @click=癱hangeName (name1)“在父页面修改name   ,,,,,& lt; div>商店中名称:{{名称}}& lt;/div>   ,,,,,& lt; router-link =?detail",祝辞& lt; h6>跳转到详情页& lt;/h6>,, & lt;/router-link>   ,,,& lt;/div>,   & lt;/template>才能,   ,,& lt; script>   ,,,import  HomeHeader 得到& # 39;. ./组件/HomeHeader& # 39;,,   ,,,import }{商店,突变,得到& # 39;@/商店# 39;   ,,,export  default  {,   ,,,,,data  (), {,   ,,,,,,,return  {,   ,,,,,,,,,name1: & # 39;主页的名字# 39;   ,,,,,,,},   ,,,,,},,   ,,,,,组件:,{,   ,,,,,,,HomeHeader    ,,,,,},,   ,,,,,计算:{   ,,,,,,,count () {   ,,,,,,,,,return  store.count   ,,,,,,,},   ,,,,,,,的名字(){   ,,,,,,,,,return  store.name   ,,,,,,,}   ,,,,,},   ,,,,,方法:{   ,,,,,,,setCount: mutations.setCount,   ,,,,,,,changeName: mutations.changeName ,   ,,,,,}   ,,,},   & lt;才能/script>

, 怎么使用Vue.observable()进行状态管理

再定义一个子页面观察数据:

//Detail.vue   & lt; template>,   & lt;才能div 类=癲etail"祝辞,   ,,,& lt; detail-header> & lt;/detail-header>,   ,,,& lt; button  @click=癱hangeName (name2)“在子页面修改name   ,,,& lt; p>商店中名称:{{名称}}& lt;/p>   & lt;/div>才能,   时间/template> & lt;   & lt; script>,   import 才能;DetailHeader 得到& # 39;. ./组件/DetailHeader& # 39;,   import 才能;}{商店,突变,得到& # 39;@/商店# 39;   export 才能;default  {,   ,,,组件:,{,   ,,,,,DetailHeader    ,,,},,   ,,,的数据(){   ,,,,,return  {   ,,,,,,,name2: & # 39;子页的名字# 39;   ,,,,,}   ,,,},   ,,,计算:{   ,,,,,的名字(){   ,,,,,,,return  store.name   ,,,,,}   ,,,},   ,,,方法:{   null   null   null   null   null   null

怎么使用Vue.observable()进行状态管理