介绍
这篇文章给大家分享的是有关怎么使用Vue.observable()进行状态管理的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
Vue的优点
Vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。
先看下官网描述,如下图
,
可见()方法,用于设置监控属性,这样就可以监控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>
,
再定义一个子页面观察数据:
//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()进行状态管理