<template>
<div id="app">
    <counter></counter>
    <div class="">
      {{isLogin}}
    </div>
    <p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="login">login</button>
    </p>
    <child :level="1">Hello world!</child>
    <child :level="3">Hello world!</child>
    <my-paragraph></my-paragraph>
    <getters></getters>
</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'

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

        }
    },
    computed: {
        count() {
            return this.$store.state.count
        },
        isLogin() {
          return this.$store.state.isLogin
        }
    },
    methods: {
        increment() {
            this.$store.commit('increment')
        },
        decrement() {
            this.$store.commit('decrement')
        },
        login() {
            this.$store.commit('login')
        }
    },
    components: {
        counter,child,myParagraph,getters
    }
}
</script>