Vue 부분 구성 요소 데이터 공유 Vue.observable()사용

구성 요소 가 세분 화 됨 에 따라 다 중 구성 요소 상태 가 공유 되 는 상황 에 직면 하 게 됩 니 다.Vuex 는 당연히 이러한 문 제 를 해결 할 수 있 습 니 다.그러나 Vuex 공식 문서 에서 말 한 것 처럼 응용 이 크 지 않 으 면 코드 가 번 거 롭 고 불필요 하지 않도록 사용 하지 않 는 것 이 좋 습 니 다.오늘 우리 가 소개 한 것 은 vue.js 2.6 에 새로 추 가 된 Observable API 입 니 다.이 api 를 사용 하면 간단 한 크로스 구성 요소 데이터 상태 공유 상황 에 대응 할 수 있 습 니 다.
store 개체 만 들 기
먼저 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;
    }
}

store 대상 을 다른 구성 요소 에 적용 합 니 다.
그리고 구성 요소 에서 이 대상 을 사용 합 니 다.

//obserVable.vue
<template>
  <div>
    <h1>          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)">  a   +1</button>
    <button @click="setCount(count - 1)">  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)">  b   +1</button>
    <button @click="setCount(count - 1)">  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>

효과 보이 기

Vue 부분 구성 요소 데이터 공유 Vue.observable()사용 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue.observable()데이터 공유 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!