Vuex 小demo

<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
})