<template>
<div class="about">
<h1>count: <span>{{count}}</span></h1>
<h1>getCount: <span>{{$store.getters.getCount}}</span></h1>
<h1>sum: <span>{{sum}}</span></h1>
<h1>getSum: <span>{{$store.getters.getSum}}</span></h1>
<button @click="clickB">test </button>
</div></template><script>import {mapState, mapGetters, mapMutations, mapActions} from 'vuex';
export default {
name: 'about',
data () {
return {
count: 0,
sum: 0
}
},
computed: {
...mapState({
count: state => state.count,
countAlias: 'count',
countPlusLocalState (state) {
return state.count + this.localCount;
}
}),
...mapGetters([
'getCount', 'getSum'
])
},
mounted () {
this.count = this.$store.state.count;
this.sum = this.$store.state.a.sum;
},
methods:{
...mapMutations(
'add','addO'
),
...mapActions([
'add','addO'
]),
clickB () {
this.$store.dispatch('add');
this.$store.dispatch('addO');
}
}
}</script>
