动态系统参数的使用总结

在若依系统中，参数设置功能允许开发人员、实施人员动态配置系统参数，无需修改后台配置文件，也无需重启服务器即可生效。这使得系统的维护和调整更加灵活。本文将详细总结如何在若依系统中使用动态参数配置功能。

一、引入全局变量和方法

首先，需要在 main.js 中引入系统提供的全局方法 getConfigKey，用于获取系统参数。

// main.js 文件中
import { getConfigKey } from "@/api/system/config";

// 将 getConfigKey 方法挂载到 Vue 实例的原型上，这样在任何组件中都可以通过 this.getConfigKey 访问它
Vue.prototype.getConfigKey = getConfigKey;

以上代码通过将 getConfigKey 方法注册到 Vue 的原型上，使得在项目中的任何 Vue 组件中都可以方便地调用这个方法来获取系统配置参数。

二、在页面中使用系统参数

在需要获取系统参数的页面或组件中，可以使用 getConfigKey 方法来获取相应的参数值。

export default {
  data() {
    return {
      someConfigValue: "", // 用于存储系统参数的值
    };
  },
  created() {
    // 在组件创建时调用 getConfigKey 方法获取参数值
    this.getConfigKey("参数键名").then(response => {
      // 将获取到的参数值存储到 data 中
      this.someConfigValue = response.msg;
    });
  },
};

以上代码演示了如何在组件的 created 生命周期钩子中使用 getConfigKey 方法来获取系统参数，并将其存储在组件的 data 中。

三、参数使用示例

假设系统中有一个参数键名为 siteTitle，用于配置网站的标题，以下是如何在页面中获取并使用这个参数的示例。

export default {
  data() {
    return {
      siteTitle: "", // 存储从配置中获取的站点标题
    };
  },
  created() {
    // 获取站点标题的参数值
    this.getConfigKey("siteTitle").then(response => {
      // 将获取到的标题赋值给 siteTitle
      this.siteTitle = response.msg;
    });
  },
  methods: {
    updateTitle() {
      // 使用获取到的参数值更新页面标题
      document.title = this.siteTitle || "默认标题";
    },
  },
  watch: {
    // 监听 siteTitle 的变化，当它变化时更新页面标题
    siteTitle: 'updateTitle',
  }
};

在上面的示例中，siteTitle 是从系统配置中获取的参数值，并且在页面的 created 钩子中进行获取。当 siteTitle 值发生变化时，页面的标题也会随之更新。

四、总结

通过引入 getConfigKey 全局方法，开发者可以在项目中的任何地方轻松获取系统配置参数。这种方式不仅减少了硬编码参数的出现，还使得系统配置更加灵活和动态。

主要步骤包括：

1. 在 main.js 中引入并注册全局方法 getConfigKey。
2. 在组件或页面中使用 getConfigKey 方法获取所需的配置参数。
3. 将获取的参数值应用到页面或逻辑中，如设置页面标题、控制页面内容等。