<template>
    <div class="container">
        <h1>{{ $route.name }}</h1>
        <h1>
            <el-icon name="app-store" size="30" />
            <span>马士兵严选</span>
            <el-icon name="msb" svg size="30"></el-icon>
            <el-icon name="vue" svg color="red" size="30" />
            <el-icon name="Avatar" 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>
        {{ form }}
        <el-input v-model="form.msg" />
        <el-editor preview="pc" v-model="form.msg"></el-editor>
    </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');
    };
    const form = reactive({ msg: '123' });
</script>

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