<template>
    <div class="container">
        <h1>
            <XIcon name="app-store" size="30" />
            <span>马士兵严选</span>
            <XIcon name="msb" svg size="30"></XIcon>
            <XIcon name="vue" svg color="red" size="30" />
        </h1>
        <p>count:{{ count }}, double count:{{ doubleCount }}</p>
        <el-button type="primary" @click="handleAdd">增加</el-button>
        <el-button type="danger" @click="handleClear">清除</el-button>
        <br />
        <el-date-picker></el-date-picker>
    </div>
</template>

<script setup>
    const store = useStore();
    const count = computed(() => store.state.demo.count);
    const doubleCount = computed(() => store.getters['demo/doubleCount']);
    const handleAdd = () => {
        store.commit('demo/add');
    };
    const handleClear = () => {
        store.dispatch('demo/clear');
    };
</script>

<style lang="less">
    .container {
        height: 2000px !important;
    }
</style>
