vue3这个注解我要补什么知识点

Question

第一个源码

github上找到一个 vue3 的项目，看源码的过程中有个知识点之前没有接触过，不知道应该补哪个知识点，看下面代码（文件在源码的路径：src\cool\modules\base\service\common.ts），在 class 头上有个 @Service 的注解。之前貌似没接触过这个概念，请指点下我要搜索什么关键字补什么知识点

import { BaseService, Service } from "@/core";

@Service("base/comm")
class Common extends BaseService {
  /**
   * 文件上传模式
   */
  uploadMode() {
    return this.request({
      url: "/uploadMode"
    });
  }

  /**
   * 权限信息
   *
   * @returns
   * @memberof CommonService
   */
  permMenu() {
    return this.request({
      url: "/permmenu"
    });
  }
}

export default Common;

第二个源码

在另外一个文件 src\cool\modules\base\store\menu.ts 中的 88 行，我初学 vuex 没有这样用过，$service 是什么意思

import { ElMessage } from "element-plus";
import storage from "store";
import store from "@/store";
import router from "@/router";
import { deepTree, revDeepTree, isArray, isEmpty } from "@/core/utils";
import { menuList } from "@/config/env";
import { revisePath } from "../utils";
import { MenuItem } from "../types";

const state = {
    // 视图路由，type=1
    routes: storage.get("viewRoutes") || [],
    // 树形菜单
    group: storage.get("menuGroup") || [],
    // showAMenu 模式下，顶级菜单的序号
    index: 0,
    // 左侧菜单
    menu: [],
    // 权限列表
    permission: storage.get("permission") || []
};

const getters = {
    // 树形菜单列表
    menuGroup: (state: any) => state.group,
    // 左侧菜单
    menuList: (state: any) => state.menu,
    // 视图路由
    routes: (state: any) => state.routes,
    // 权限列表
    permission: (state: any) => state.permission
};

const actions = {
    // 设置菜单、权限
    permMenu({ commit, state, getters }: any) {
        return new Promise((resolve, reject) => {
            const next = (res: any) => {
                if (!isArray(res.menus)) {
                    res.menus = [];
                }

                if (!isArray(res.perms)) {
                    res.perms = [];
                }

                const routes = res.menus
                    .filter((e: MenuItem) => e.type != 2)
                    .map((e: MenuItem) => {
                        return {
                            id: e.id,
                            parentId: e.parentId,
                            path: revisePath(e.router || String(e.id)),
                            viewPath: e.viewPath,
                            type: e.type,
                            name: e.name,
                            icon: e.icon,
                            orderNum: e.orderNum,
                            isShow: isEmpty(e.isShow) ? true : e.isShow,
                            meta: {
                                label: e.name,
                                keepAlive: e.keepAlive
                            },
                            children: []
                        };
                    });

                // 转成树形菜单
                const menuGroup = deepTree(routes);

                // 设置权限
                commit("SET_PERMIESSION", res.perms);
                // 设置菜单组
                commit("SET_MENU_GROUP", menuGroup);
                // 设置视图路由
                commit(
                    "SET_VIEW_ROUTES",
                    routes.filter((e: MenuItem) => e.type == 1)
                );
                // 设置菜单
                commit("SET_MENU_LIST", state.index);

                resolve(menuGroup);
            };

            // 监测自定义菜单
            if (!getters.app.conf.customMenu) {
                store.$service.common
                    .permMenu()
                    .then((res: any) => {
                        next(res);
                    })
                    .catch((err: string) => {
                        ElMessage.error("菜单加载异常");
                        console.error(err);
                        reject(err);
                    });
            } else {
                next({
                    menus: revDeepTree(menuList)
                });
            }
        });
    }
};

const mutations = {
    // 设置树形菜单列表
    SET_MENU_GROUP(state: any, list: MenuItem[]) {
        state.group = list;
        storage.set("menuGroup", list);
    },

    // 设置视图路由
    SET_VIEW_ROUTES(state: any, list: MenuItem[]) {
        router.$plugin.addViews(list);

        state.routes = list;
        storage.set("viewRoutes", list);
    },

    // 设置左侧菜单
    SET_MENU_LIST(state: any, index: number) {
        const { showAMenu } = store.getters.app.conf;

        if (isEmpty(index)) {
            index = state.index;
        }

        if (showAMenu) {
            const { children = [] } = state.group[index] || {};

            state.index = index;
            state.menu = children;
        } else {
            state.menu = state.group;
        }
    },

    // 设置权限
    SET_PERMIESSION(state: any, list: Array<any>) {
        state.permission = list;
        storage.set("permission", list);
    }
};

export default {
    state,
    getters,
    actions,
    mutations
};

Answer 1

装饰器，decorator。目前还处于 stage-2，https://github.com/tc39/propo...