最简组件间通信
// 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: {
}
})
