As the components get smaller, you will encounter multiple component state sharing situations. Vuex can solve these problems, but as the official Vuex documentation states, if the application is not large enough, it is best not to use it in order to avoid redundant code. Today we introduce Vue.js 2.6’s new Observable API, which allows us to handle some simple data state sharing across components.

First look at the official website description, as shown below

The observable() method, which sets a monitor property so that it can monitor changes in the value of a ViewModule property, can dynamically change the value of an element. The monitor property’s type invariant is a function that monitors the property by returning a function to the ViewModule object’s property.

With all that said, let’s play around with a real example:

Set up a simple scaffold, create store.js in the SRC directory of the project, use the provided store and mutation methods in the component, and other components can also use the same, so that multiple components can share the data state.

Start by creating a store.js, containing a store and a mutations, to point to the data and the processing method, respectively.

//store.js import Vue from 'vue'; Export let store = vue. observable({count:0,name:' Observable '}); export let mutations={ setCount(count){ store.count=count; }, changeName(name){ store.name=name; }}

Then reference it in the component home.vue, using the data and methods in the component:

//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)" "> <div>store name: {{name}}</div> <router-link to="/detail" ><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>

Define a subpage to observe the data:

//Detail.vue <template> <div class="detail"> <detail-header></detail-header> <button @click="changeName(name2)"> </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 of child page '}}, computed:{name(){return store.name}}, methods:{ changeName:mutations.changeName } } </script>

The sub-page is shown in the figure below:

We simply click the button to change the data in the Store, and the effect is as follows:

A final note is that to use vue.observable () if the current project’s VUE version is below 2.6, you must update the VUE and Vue-Template-Compiler. The VUE and Vue-Template-Compiler versions need to be synchronized, and the project will report an error if they are not.

// Upgrade the Vue version NPM update vue-s or yarn add vue-s NPM update vue-template-compiler-d or yarn add vue-template-compiler-d