怎么使用Vue.observable()進行狀態(tài)管理

這篇文章給大家分享的是有關(guān)怎么使用Vue.observable()進行狀態(tài)管理的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)一直秉承“誠信做人，踏實做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個客戶多一個朋友！為您提供網(wǎng)站設(shè)計、網(wǎng)站制作、成都網(wǎng)頁設(shè)計、微信小程序、成都網(wǎng)站開發(fā)、成都網(wǎng)站制作、成都軟件開發(fā)、成都App定制開發(fā)是成都本地專業(yè)的網(wǎng)站建設(shè)和網(wǎng)站設(shè)計公司，等你一起來見證！

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

先看下官網(wǎng)描述，如下圖

 

observable()方法，用于設(shè)置監(jiān)控屬性，這樣就可以監(jiān)控viewModule中的屬性值的變化，從而就可以動態(tài)的改變某個元素中的值，監(jiān)控屬性的類型不變量而是一個函數(shù)，通過返回一個函數(shù)給viewModule對象中的屬性，從而來監(jiān)控該屬性。

說那么多，我們在實際例子中嘗試玩一下：

搭建個簡單腳手架，在項目src目錄下建立store.js，在組件里使用提供的 store和 mutation方法，同理其它組件也可以這樣使用，從而實現(xiàn)多個組件共享數(shù)據(jù)狀態(tài)。

首先創(chuàng)建一個 store.js，包含一個 store和一個 mutations，分別用來指向數(shù)據(jù)和處理方法。

//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中引用，在組件里使用數(shù)據(jù)和方法：

//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" ><h6>跳轉(zhuǎn)到詳情頁</h6>  </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>

 

再定義一個子頁面觀察數(shù)據(jù)：

//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中的數(shù)據(jù)，效果如下：

 

最后補充一點，就是如果當前項目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

感謝各位的閱讀！關(guān)于“怎么使用Vue.observable()進行狀態(tài)管理”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當前標題：怎么使用Vue.observable()進行狀態(tài)管理
轉(zhuǎn)載注明：http://muchs.cn/article44/jpejee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、網(wǎng)站營銷、移動網(wǎng)站建設(shè)、做網(wǎng)站、云服務器、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)