Vue local component data sharing Vue.observable() usage

As components become more detailed, you will encounter situations where multiple components share state. Vuex can certainly solve this type of problem, but as the official Vuex documentation says, if the application is not large enough, it is best not to use it to avoid cumbersome and redundant code. Today we will introduce the newly added Observable API in vue.js 2.6. By using this api, we can deal with some simple cross-component data state sharing situations.

Creating a store object

First, create a store.js, which contains a store and a mutation, which are used to point to data and processing methods respectively.

//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;
    }
}

Apply store objects to different components

Then use the object in your component

//obserVable.vue
<template>
  <div>
    <h1>Cross-component data state sharing 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>

//Component a
<template>
  <div class="bk">
    <span
      ><h1>a component</h1>
      {{ count }}--{{ name }}
    >
    <button @click="setCount(count + 1)">+1 in the current a component</button>
    <button @click="setCount(count - 1)">Current a component -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>

//Component b
<template>
  <div class="bk">
    <h1>b component</h1>
    {{ count }}--{{ name }}
    <button @click="setCount(count + 1)">+1 in current b component</button>
    <button @click="setCount(count - 1)">Current b component -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>

Display Effect

insert image description here

This concludes this article on the use of Vue.observable() for Vue local component data sharing. For more relevant Vue.observable() data sharing content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: