stmms-web/src/components/mark/Mark.vue

<template>
  <h1>展示新前端获取setting的结果</h1>
  <div>
    setting:
    <pre> {{ store.setting }}</pre>
  </div>
</template>

<script lang="ts">
import { reactive, defineComponent, onMounted, toRefs } from "vue";
import { getSetting } from "@/api/markPage";
import { store } from "@/store";

export default defineComponent({
  name: "Mark",
  setup: () => {
    async function updateSetting() {
      const settingRes = await getSetting();
      store.setting = settingRes.data;
    }
    onMounted(() => {
      updateSetting();
    });
    return { store };
  },
});
</script>

<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>