VUEX最简组件间通信

最简组件间通信

// CounterBtn.vue
<template>
    <div>
        <button @click="add">增加</button>
    </div>
</template>

<script>
export default {
    methods:{
        add:function() {
            this.$store.commit("increment")
        }
    }
}
</script>

// CounterDis.vue
<template>
    <div>
        <h1>{{count}}</h1>
    </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  }
};
</script>

// App.vue
<template>
    <div>
        <counter-btn></counter-btn>
        <counter-dis></counter-dis>
    </div>
</template>

<script>
import CounterBtn from '../components/CounterBtn'
import CounterDis from '../components/CounterDis'
export default {
    components:{
        'counter-btn':CounterBtn,
        'counter-dis':CounterDis
    }
};
</script>

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {

  }
})