Vue uses VUEX for two-way data binding between components

Monitor the mapState of data changes in Vuex

    
    
import Vue from 'vue';
import Vuex from 'vuex';
import { mapState } from 'vuex'

Vue.use(Vuex);
Vue.config.productionTip = false;

const homeComp02 = {
  template: `<div>{{ count }}</div>`.computed: {
    ...mapState({
      count: state= > state.number.count,
    })
  },
}

const homeComp = {
  components: { homeComp02 },
  template: `
      

       {{ count }} 
        
      
`.computed: {
    ...mapState({
      count: state= > state.number.count,
    })
  },
}
const number = {
  state: {
    count: 0,},getters: {
    addCount: state= > {

      return state.count + 1}},mutations: {},
  actions: {}}const store = new Vuex.Store({
  modules: {
    number
  },
});
const App = {
  components: { homeComp },
  template: ` 
      
 
        
      
 `,
  create() {
    this.$store.commit('setCount'.2); }};new Vue({
  store,
  render: h= > h(App),
}).$mount('#app')

    

Copy the code