<template>
<div>
<h2>{{msg}}</h2><hr/>
<h3>{{$store.state.count}}--{{count}}</h3>
<p>
<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>
</p>
</div>
</template>
<script>
import store from '@/vuex/store';
import { mapState } from 'vuex';
export default {
store,
data(){
return{
msg:'hello Vuex'
}
},
//第一种
/*
computed:{
count(){
return this.$store.state.count
}
}
*/
//第二种
/*
computed:mapState({
count:state=>state.count,
})
*/
//第三种
computed:mapState(['count']),
}
</script>
//数据仓库
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state={
count:1
}
const mutations={
add(state){
state.count++;
},
reduce(state){
state.count--;
}
}
//暴露出去
export default new Vuex.Store({
state,
mutations
})