Vue局部組件數(shù)據(jù)共享Vue.observable()的使用

更新時(shí)間：2021年06月29日 10:05:09 作者：GGCoder

隨著組件的細(xì)化，就會遇到多組件狀態(tài)共享的情況，今天我們介紹的是 vue.js 2.6 新增加的 Observable API ，通過使用這個(gè) api 我們可以應(yīng)對一些簡單的跨組件數(shù)據(jù)狀態(tài)共享的情況，感興趣的可以了解一下

隨著組件的細(xì)化，就會遇到多組件狀態(tài)共享的情況， Vuex當(dāng)然可以解決這類問題，不過就像 Vuex官方文檔所說的，如果應(yīng)用不夠大，為避免代碼繁瑣冗余，最好不要使用它，今天我們介紹的是 vue.js 2.6 新增加的 Observable API ，通過使用這個(gè) api 我們可以應(yīng)對一些簡單的跨組件數(shù)據(jù)狀態(tài)共享的情況。

創(chuàng)建store對象

首先創(chuàng)建一個(gè) store.js，包含一個(gè) store和一個(gè) 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;
    }
}

把store對象應(yīng)用在不同組件中

然后再在組件中使用該對象

//obserVable.vue
<template>
  <div>
    <h1>跨組件數(shù)據(jù)狀態(tài)共享 obserVable</h1>
    <div>
      <top></top>
      <bottom></bottom>
    </div>
  </div>
</template>

<script>
import  top  from './components/top.vue';
import  bottom  from './components/bottom.vue';
export default {
  name: 'obserVable',
  components: {
    top,
    bottom
  }
};
</script>

<style scoped>
</style>

//組件a
<template>
  <div class="bk">
    <span
      ><h1>a組件</h1>
      {{ count }}--{{ name }}</span
    >
    <button @click="setCount(count + 1)">當(dāng)前a組件中+1</button>
    <button @click="setCount(count - 1)">當(dāng)前a組件中-1</button>
  </div>
</template>
<script>
import { store, mutations } from '@/store';
export default {
  computed: {
    count() {
      return store.count;
    },
    name() {
      return store.name;
    }
  },
  methods: {
    setCount: mutations.setCount,
    changeName: mutations.changeName
  }
};
</script>
<style scoped>
.bk {
  background: lightpink;
}
</style>

//組件b
<template>
  <div class="bk">
    <h1>b組件</h1>
    {{ count }}--{{ name }}
    <button @click="setCount(count + 1)">當(dāng)前b組件中+1</button>
    <button @click="setCount(count - 1)">當(dāng)前b組件中-1</button>
  </div>
</template>
<script>
import { store, mutations } from '@/store';
export default {
  computed: {
    count() {
      return store.count;
    },
    name() {
      return store.name;
    }
  },
  methods: {
    setCount: mutations.setCount,
    changeName: mutations.changeName
  }
};
</script>
<style scoped>
.bk {
  background: lightgreen;
}
</style>

顯示效果

在這里插入圖片描述

到此這篇關(guān)于Vue局部組件數(shù)據(jù)共享Vue.observable()的使用的文章就介紹到這了,更多相關(guān)Vue.observable() 數(shù)據(jù)共享內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: