使用Vue.observable()进行状态管理的实例代码详解

网络编程 2024/9/22 佚名

3 1 2

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

先看下官网描述，如下图

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

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

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

首先创建一个 store.js，包含一个 store和一个 mutations，分别用来指向数据和处理方法。

//store.js
import Vue from 'vue';

export let store =Vue.observable({count:0,name:'李四'});
export let mutations={
  setCount(count){
    store.count=count;
  },
  changeName(name){
    store.name=name;
  }
}

然后在组件Home.vue中引用，在组件里使用数据和方法：

//Home.vue
 <template> 
    <div class="container"> 
      <home-header></home-header> 
      <button @click="setCount(count+1)">+1</button>
      <button @click="setCount(count-1)">-1</button>
       <div>store中count：{{count}}</div>
      <button @click="changeName(name1)">父页面修改name</button>
      <div>store中name：{{name}}</div>
      <router-link to="/detail" ><h5>跳转到详情页</h5>  </router-link>
    </div> 
  </template> 
  <script> 
    import HomeHeader from '../components/HomeHeader'  
    import {store,mutations} from '@/store'
    export default { 
      data () { 
        return { 
          name1:'主页的name'
        } 
      }, 
      components: { 
        HomeHeader 
      }, 
      computed:{
        count(){
          return store.count
        },
        name(){
          return store.name
        }
      },
      methods:{
        setCount:mutations.setCount,
        changeName:mutations.changeName  
      }
    } 
  </script>

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

//Detail.vue
<template> 
  <div class="detail"> 
    <detail-header></detail-header> 
    <button @click="changeName(name2)">子页面修改name</button>
    <p>store中name：{{name}}</p>
  </div> 
</template> 
<script> 
  import DetailHeader from '../components/DetailHeader' 
  import {store,mutations} from '@/store'
  export default { 
    components: { 
      DetailHeader 
    } ,
    data(){
      return {
        name2:'子页的name'
      }
    },
    computed:{
      name(){
        return store.name
      }
    },
    methods:{
      changeName:mutations.changeName
    }
  } 
</script>

子页面显示如图：

我们简单点击下按钮，改变下store中的数据，效果如下：

最后补充一点，就是如果当前项目vue版本低于2.6，要使用Vue.observable()，就必须要升级，升级 vue 和 vue-template-compiler，两者的版本需要同步，如果不同步项目会报错。

//升级vue版本
npm update vue -S 或者 yarn add vue -S
npm update vue-template-compiler -D 或者 yarn add vue-template-compiler -D

总结

以上所述是小编给大家介绍的使用Vue.observable()进行状态管理的实例代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

vue,observable,vue,状态管理

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“使用Vue.observable()进行状态管理的实例代码详解”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年09月22日

使用Vue.observable()进行状态管理的实例代码详解

vxe-table vue table 表格组件功能

微信小程序 swiper 组件遇到的问题及解决方法

评论“使用Vue.observable()进行状态管理的实例代码详解”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接