<template>
  <div>
    <h1>state</h1>
    <div>countA: {{$store.state.demo.countA}}</div>
    <div>countB: {{$store.state.demo.countB}}</div>
    <h1>getter</h1>
    <div>A - B = {{$store.getters['demo/aSubB']}}</div>
    <div>对比结果: {{$store.getters['demo/stringASubB']}}</div>
    <h1>action</h1>
    <el-button @click="handleActionAdd('countA')">A++</el-button>
    <el-button @click="handleActionAdd('countB')">B++</el-button>
    <h1>mutation</h1>
    <el-button @click="handleMutationAdd('countA')">A = 10</el-button>
    <el-button @click="handleMutationAdd('countB')">B = 10</el-button>
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted,
    ref,
    toRefs,
    reactive,
    watch,
    getCurrentInstance,
    ComponentInternalInstance,
    computed,
  } from "vue";
  import { useStore } from "vuex";

  export default defineComponent({
    name: "",
    components: {
    },
    setup() {
      const store = useStore();
      const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;
      const state = reactive({
      });
      const handleActionAdd = (type) => {
        store.dispatch('demo/LOAD_COUNT', {
          type,
        })
      }
      const handleMutationAdd = (type) => {
        store.commit('demo/SET_COUNT', {
          type,
          val: 10
        })
      }
      onMounted(() => {
      })
      return {
        ...toRefs(state),
        handleActionAdd,
        handleMutationAdd
      }
    },
  });
</script>
<style scoped lang="scss">
</style>
