改进 i18n 全局 getters

简介

上一篇在这里： https://www.cnblogs.com/cjc-0313/p/16964840.html

之前只是统一将获取函数放到全局进行维护，然后在各组件中导入，但函数的导入和调用还是有些不便，因此，简单优化一下使用方式。

getI18nGlobal

在 src/locale 路径下新建 getI18nGlobal.js（或 .ts），内容如下。保留了之前的部分导出，主要扩展了一个 mapGettersI18n 函数，用于批量输出 getters 。

import { i18n } from './index';
const { t: $t } = i18n.global;

export const mapGettersI18n = (moduleName) => {

  const getFieldKeyI18n = setupFieldKeyI18nGlobal(moduleName);
  const getFiltersI18n = setupFiltersI18nGlobal(moduleName);
  const getPlaceholderI18n = setupPlaceholderI18nGlobal(moduleName);
  const getFieldMessageI18n = setupFieldMessageI18nGlobal(moduleName);
  const getFormMessageI18n = setupFormMessageI18nGlobal(moduleName);

  return {
    getFieldKeyI18n,
    getFiltersI18n,
    getPlaceholderI18n,
    getFieldMessageI18n,
    getFormMessageI18n,
  };
};

// common
export const getCommonI18n = (name) => $t(`common.${name}`);
export const getActionI18n = (actionType) => $t(`action.${actionType}`);
export const getModuleNameI18n = (moduleName) =>
  $t(`${moduleName}.info.moduleName`);

//#region 以下通过模块名+其他参数的形式获取 i18n 文本 --

export const getFieldKeyI18nGlobal = (moduleName, fieldName) =>
  $t(`${moduleName}.fieldKeys.${fieldName}`);

export const getFiltersI18nGlobal = (moduleName, fieldName, fieldVal) =>
  $t(`${moduleName}.filters.${fieldName}.${fieldVal}`);

export const getPlaceholderI18nGlobal = (moduleName, fieldName) =>
  $t(`${moduleName}.placeholder.${fieldName}`);

export const getFieldMessageI18nGlobal = (
  moduleName,
  componentType,
  actionType
) => $t(`${moduleName}.messages.field.${componentType}.${actionType}`);

export const getFormMessageI18nGlobal = (
  moduleName,
  componentType,
  actionType
) => $t(`${moduleName}.messages.form.${componentType}.${actionType}`);

//#endregion --

//#region 以下通过传入模块名，返回一个闭包函数，避免每次使用都要传递模块名 --

export const setupFieldKeyI18nGlobal = (moduleName) => (fieldName) =>
  $t(`${moduleName}.fieldKeys.${fieldName}`);

export const setupFiltersI18nGlobal = (moduleName) => (fieldName, fieldVal) =>
  $t(`${moduleName}.filters.${fieldName}.${fieldVal}`);

export const setupPlaceholderI18nGlobal = (moduleName) => (fieldName) =>
  $t(`${moduleName}.placeholder.${fieldName}`);

export const setupFieldMessageI18nGlobal =
  (moduleName) => (componentType, actionType) =>
    $t(`${moduleName}.messages.field.${componentType}.${actionType}`);

export const setupFormMessageI18nGlobal =
  (moduleName) => (componentType, actionType) =>
    $t(`${moduleName}.messages.form.${componentType}.${actionType}`);

//#endregion --

使用示例

import { mapGettersI18n } from '@/locale/getI18nGlobal';

const moduleName = ref('productManagement'); // 当前组件的模块名

// 现在可以批量产出应用了当前组件模块名的 getters ，比之前一个个传更方便
const { getFieldKeyI18n, getFieldMessageI18n } = mapGettersI18n(
  moduleName.value
);

经过验证，仍然可以保持响应式更新语言。

总结

对于各业务组件，模块名变量属于私有变量，因此可以使用 mapGettersi18n 批量生成获取函数，或者使用 setup* 系列 API 单个生成；而对于基础组件或通用组件，若需要传入 moduleName 参数（代表业务组件的模块名，不是该类组件自身的基础模块名），可以使用 get*Global 系列 API 。