DayDayUp

「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」。

需求

如图，input展示有七级，后期可能会有8、9甚至更多层级，为了灵活控制进入改画面初始出现的input的数量，需要在vue项目中配置配置一个变量，便于以后更改

store

首先，要实现该功能，不得不提vue的store的用法，就是需要在不同路由中使用同一个会改编的参数，也就是需要一个全局参数。

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state) 。Vuex 和单纯的全局对象有以下两点不同：

详细内容：点我

我的代码

1.首先设置一个文件，专门存放变量（levelManagement）

文件名及位置

module.exports = {
  title: "无人数采平台",

  /**
   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
   */
  sideTheme: "theme-dark",

  /**
   * 是否系统布局配置
   */
  showSettings: false,

  /**
   * 是否显示顶部导航
   */
  topNav: false,

  /**
   * 是否显示 tagsView
   */
  tagsView: true,

  /**
   * 是否固定头部
   */
  fixedHeader: false,

  /**
   * 是否显示logo
   */
  sidebarLogo: true,

  /**
   * @type {string | array} 'production' | ['production', 'development']
   * @description Need show err logs component.
   * The default is only used in the production env
   * If you want to also use it in dev, you can pass ['production', 'development']
   */
  errorLog: "production",

  /**
   * 权限中心-组织管理：限制级别管理层级数量
   */
  levelManagement: 7
};

如图，我将变量命名为levelManagement，初始为7

2.缓存及引用问题

代码搜：levelManagement；文件名及位置

代码

import variables from '@/assets/styles/element-variables.scss'
import defaultSettings from '@/settings'

const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, levelManagement } = defaultSettings

const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || ''
const state = {
  theme: storageSetting.theme || variables.theme,
  sideTheme: storageSetting.sideTheme || sideTheme,
  showSettings: showSettings,
  topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
  tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
  fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader,
  sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo,
  levelManagement: storageSetting.levelManagement === undefined ? levelManagement : storageSetting.levelManagement//判断是否在缓存中存在
}
const mutations = {
  CHANGE_SETTING: (state, { key, value }) => {
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  }
}

const actions = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

3.使用

代码任意部分都可以这样使用：this.$store.state.settings.levelManagement;

  getUnitLevel(requestData).then((response) => {
        const { code, data } = response;
        if (code != 0) return;
        const sortedData = data.sort(
          (pre, curr) => pre.deptLevel - curr.deptLevel
        );
        this.$set(this.dynamicValidateForm, "domains", []);
        for (
          let index = 0;
          index < this.$store.state.settings.levelManagement;
          index++
        )

总结

这样极大的提高了代码的可维护率，特别是对于那些需要经常变得变量，非常推荐这样使用！

Vue，配置文件中配置变量，便于以后维护