<template>
<div id="app">
    <counter></counter>
    <div class="">
        {{isLogin}}
    </div>
    <p>
        <!-- <button @click="increment">+</button> -->
        <button @click="add">add</button>
        <button @click="decrement">-</button>
        <button @click="login">login</button>
        <button @click="incrementAsync">incrementAsync</button>
    </p>
    <child :level="1">Hello world!</child>
    <child :level="3">Hello world!</child>
    <my-paragraph></my-paragraph>
    <getters></getters>
    <span>obj: {{obj}}</span>
    <button @click="addObj">addObj</button>
    <module></module>
</div>
</template>

<script>
import counter from './components/counter.vue'
import child from './components/child.vue'
import myParagraph from './components/myParagraph.vue'
import getters from './components/getters.vue'
import module from './components/module.vue'
import { mapMutations } from 'vuex'

export default {
    name: 'app',
    data() {
        return {

        }
    },
    computed: {
        isLogin() {
            return this.$store.state.isLogin
        },
        obj () {
            return this.$store.state.obj
        }
    },
    methods: {
        // increment() {
        //     this.$store.commit('increment', {
        //         amount: 10
        //     })
        //     // this.$store.commit('increment', {
        //     //     amount: 10
        //     // },{silent:true})
        //     // this.$store.commit({
        //     //     type:'increment',
        //     //     amount: 10
        //     // })
        // },
        decrement() {
            this.$store.commit('decrement')
        },
        login() {
            this.$store.commit('login')
        },
        addObj() {
            this.$store.commit('addObj')
        },
        ...mapMutations({
          add: 'increment' // 映射 this.add() 到 this.$store.commit('increment')
        }),
        // ...mapMutations([
        //   'increment' // 映射 this.increment() 到 this.$store.commit('increment')
        // ]),
        incrementAsync() {
          this.$store.dispatch('incrementAsync')
        }
    },
    components: {
        counter,
        child,
        myParagraph,
        getters,
        module
    }
}
</script>